cssnpm i css-loader style-loader –save-dev在webpack.config.js 中增加如下配置：rules: [{ test: /.css$/, use: [ ‘style-loader’, ‘css-loader’ // 执行顺序是从右往左 ]}创建css文件，并引入，打包后可以正常解析，但是css文件是混入js中，所以需要分离css.分离csswebpack4中完成这个功能的插件是mini-css-extract-plugin.npm install mini-css-extract-plugin –save-dev在webpack.prod.js 中增加如下配置：const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);module.exports = { module: { rules: [ { test: /.css$/, use: [ { loader: MiniCssExtractPlugin.loader }, ‘css-loader’ ] } ] }, plugins:[ new MiniCssExtractPlugin({ filename: ‘[name].css’ }) ]}处理图片新建文件夹src/images，用来放图片。file-loadernpm i file-loader –save-dev{ test: /.(png|jpg|gif|svg)$/, loader: ‘file-loader’, options: { name: ‘[name].[ext]?[hash]’ }}url-loadernpm i url-loader –save-dev区别file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。扩展—vue中的图片动态引用img标签<template> <img :src=“imgUrl”></template>第一种：import imgUrl from “../assets/test.png”;第二种：data() { return { imgUrl: require("../assets/test.png") }}第三种：created() { this.imgUrl = require("@/" + urlTemp);}css中url公司项目中有个需求，就是每个模块都要展示介绍功能的图片，切模块时，图片要相应的改变，是通过background来实现的，这个时候就需要动态引用图片。实现方式如下：<div :style="{background: ‘url(’ + require(’../assets/’ + imgUrl[i]) +’)’}"></div>data() { return { imgUrl: [ “test1.png”, “test2.png”, “test3.png”, ] }}或者直接将图片放入static文件夹中，也可以通过循环拿到。然后，我试验了一下，除了以上两种方式，其他方式写的都报错。不知道有没有大佬指点一下~~下面的只是记录一下，跟上面的无关，<div :style=“style”></div>data() { return { style: [ {background: ‘url(’ + require(’../assets/test1.png’) +’)’} // 不能写变量 ] }}处理js文件参考链接：webpack4.0各个击破（4）—— Javascript & splitChunk代码分离在webpack4中删除了原来的CommonsChunkPlugin插件，内部集成的optimization.splitChunks选项可以直接进行代码分离。在webpack.prod.js 中增加如下配置：optimization: { splitChunks: { chunks: ‘async’, //默认只作用于异步模块，为all时对所有模块生效,initial对同步模块有效 minSize: 30000, //合并前模块文件的体积 minChunks: 1 //最少被引用次数 }}