上一篇学习了如何配置和运行webpack，但是由于js的简单打包，有时候我们需要打包的CSS文件很多，我该怎么办呢？做？别着急，本文就是来学习如何轻松将css文件打包在一起的。配置webpack环境首先创建一个空文件夹通过命令全局安装webpack（如果已经全局安装webpack，可以直接下一步初始化根目录）//globallyinstallnpminstall-gwebpack//或者--淘宝镜像，速度对比快速cnpminstall-gwebpack然后初始化你的文件根目录和安装依赖npminit//根目录初始化npminstall--save-devwebpack//安装webpack并创建你的项目eg:创建一个根文件夹下的src文件夹，src文件夹可以放你的源代码js，css等。同根目录下创建一个public文件夹，把你的html文件放在里面。这里的目的是导入打包后的js文件。这里我们先将打包后的js文件命名为bundle.js，并在根目录下创建并配置webpack.config.js文件constpath=require('path');module.exports={//JavaScript执行入口文件，entry：'。/src/js/main.js',//需要指定输出路径path和输出文件名filenameoutput:{filename:'bundle.js',//自定义输出文件名path:path.resolve(__dirname,'./public/js')//自定义输出文件所在目录},//设置模式mode:'development'//设置模式}Loader基础环境配置完成后，由于webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，需要使用loader进行转换。不能直接打包css，所以需要用到css-loader和style-loader，它们做两件不同的事情，css-loader会遍历CSS文件，找到url()表达式并处理它们，style-loader会把原始的CSS代码插入到页面中的一个style标签中。安装css-loader和style-loader（全局安装需要参数-g）。cnpminstallcss-loaderstyle-loader执行以上命令后，会在当前目录下生成一个node_modules目录，该目录为css-loader和style-loader的安装目录。接下来在src文件夹下的css文件夹中新建一个index.css文件body{background:red;}并配置入口文件main.jsrequire("!style-loader!css-loader!../css/index.css");//这是配置好的css文件document.write("HelloWorld!");然后在根目录下运行webpack。webpack输出成功后，打开你的html文件，就可以看到打包好的带有css项目的文件了！在配置requireCSS文件的时候，必须写loader前缀!style-loader!css-loader!，有点麻烦，我们可以使用配置文件来方便操作。首先更改requireCSS方法：require("../css/index.css");然后配置webpack.config.js文件constpath=require('path');module.exports={//JavaScript执行入口文件,entry:'./src/js/main.js',//需要指定输出路径path和输出文件名filenameoutput:{filename:'bundle.js',//自定义输出文件名path:path.resolve(__dirname,'./public/js')//自定义输出文件目录},//设置style-loadercss-loadermodule:{rules:[{test:/\.css$/,use:[{loader:"style-loader"},{loader:"css-loader"}]}]}}再次运行webpack，你会发现有神奇的效果。随着开发环境项目越来越大，webpack的编译时间会越来越长。您可以使用参数使编译输出带有进度和颜色。webpack--progress--colors如果不想每次修改模块都重新编译，可以开启监听模式。开启监控模式后，没有变化的模块在编译后会缓存在内存中，不会每次都重新编译，所以监控模式的整体速度是非常快的。webpack--progress--colors--watch当然我们可以使用webpack-dev-server来开发服务，这样我们就可以通过localhost:8080启动一个express静态资源web服务器，它会自动以监听方式运行webpack，浏览时打开http://localhost:8080/或http://localhost:8080/webpack-dev-server/浏览项目中的页面和编译后的资源输出，通过socket实时监控它们的变化.io服务并自动刷新页面。//安装cnpminstallwebpack-dev-server-g//运行webpack-dev-server--progress--colors，在浏览器中打开http://localhost:8080/。输出如下：进入对应文件，打开你的工程
