//rules中添加 { //css-loader使能够使用类似@import和url（...）的方法实现require,style-loader将所有的计算后的样式加入页面中 //webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面 test: /\.css$/, use: ['style-loader', 'css-loader'] }
添加main.css文件，
span{color:red;}
目录如下
四，搭建webpack微服务器
在开发过程中，我们不可能修改一次，打包一次。因此我们需要使用到webpack提供的服务器。
cnpm install webpack-dev-server --save-dev
为了方便我们在pack.json中配置脚本。
"start":"webpack-dev-server--modedevelopment", "dev":"webpack--modedevelopment", "build":"webpack--modeproduction"
npm run start
启动成功后访问服务地址，就可以实现修改代码之后，页面实时刷新。
启动时使用的是默认配置。
当我们需要个性化设置时，在webpack.config.js中添加设置即可
//以下是服务环境配置 devServer:{ port:8085,//端口 host:'localhost',//地址 inline:true,//用来支持dev-server自动刷新 open:true,//开启webpack-dev-server时自动打开页面 historyApiFallback:true, contentBase:path.resolve(__dirname),//用来指定index.html所在目录 publicPath:'/build/',//用来指定编译后的bundle.js的目录 openPage:"build/index.html"//指定打开的页面 }
这样，一个简单的webpack4 + ES6的开发环境就搭建完毕。