上篇文章了解了怎么去配置以及运行webpack，但是由于简单的打包js，有时候我们有很多css文件需要去打包，这个怎么办呢？不用着急，这边文章就是来一起学习怎么去简单的打包css文件。
配置webpack环境
首先创建空文件夹通过命令全局安装webpack（如果你已经全局安装过webpack，可以直接进行下一步初始化根目录）
//全局安装
npm install -g webpack
//或者--淘宝镜像，速度比较快
cnpm install -g webpack
其次初始化你的文件根目录并且安装依赖
npm init //根目录初始化
npm install --save-dev webpack // 安装Webpack
然后创建你的项目
eg：在根文件夹下创建一个src文件夹，src文件夹里面可以放入你的源代码js，css等
同样根目录下创建一个public文件夹，里面放入你的html文件它在这里目的在于引入打包后的js文件，这里我们先把 之后打包后的js文件命名为bundle.js
根目录下创建并配置webpack.config.js文件
const path=require('path');
module.exports={
//JavaScript执行入口文件,
entry:'./src/js/main.js',
//需要指定一下输出的路径path和输出的文件名filename
output:{
filename:'bundle.js', //自定义输出文件名
path:path.resolve(__dirname,'./public/js') //自定义输出文件所在目录
},
//设置mode
mode: 'development' // 设置mode
}
Loader
基本环境配置好后，由于webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。不可以直接打包css，所以我们需要使用到 css-loader 和 style-loader。，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。
接下来在src文件夹下的css文件夹里创建一个index.css文件
body{
background: red;
}
同时配置入口文件main.js
require("!style-loader!css-loader!../css/index.css");//这个就是配置的css文件
document.write("Hello World!");
然后在根目录下运行webpack
webpack
输出成功后，打开你的html文件，即可看到带有css的打包过的项目！
配置文件
require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，这样有些麻烦，我们可以通过配置文件来方便操作。
首先更改require CSS方式：
require("../css/index.css");
然后配置webpack.config.js文件
const path=require('path'); module.exports={ //JavaScript执行入口文件, entry:'./src/js/main.js', //需要指定一下输出的路径path和输出的文件名filename output:{ filename:'bundle.js', //自定义输出文件名 path:path.resolve(__dirname,'./public/js') //自定义输出文件所在目录 }, //设置style-loader css-loader module:{ 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 服务实时监听它们的变化并自动刷新页面。
//安装 cnpm install webpack-dev-server -g //运行 webpack-dev-server --progress --colors
在浏览器打开 http://localhost:8080/ 输出结果如下：
进入到相对应的文件打开你的项目
热门跟贴