Webpack入门(二)——CSS打包

一、JS模块化

我们在scripts目录下添加一个module.js文件，目录结构如下：

并写入以下代码

// module.js
var text = 'Hello Webpack!';

module.exports = {   // CommonJS规范中模块输出语法
    text: text
};

然后在index.js中引入module.js文件

// index.js
var module = require('./module.js');   // CommonJS规范中模块引入语法

alert(module.text);   // 打包后同样输出“Hello Webpack!”

由于我们在上一节中已经对Webpack的打包入口和输出路径进行了基本配置，所以我们只需同样执行npx webpack命令即可将两个JS文件进行打包输出到dist目录。
有时输入的命令比较长，我们可以将其写入package.json文件的"scripts"属性中。

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

接着我们只需执行npm run start命令即可（或直接输入npm start）。

二、打包CSS样式

1. loader简介
由于Webpack打包入口目前只配置了一个index.js文件，那么其他需要被打包的文件都必须通过模块化方式引入该文件才行，而默认情况下，引入的文件必须是js文件（如上面添加的module.js）。
那么其他文件类型该如何进行打包呢？
这时我们就要用到Webpack中所提供的各种loader，它就是专门用于处理除JS文件之外的其他格式文件的编译、提取、合并、打包等工作的。
其中CSS文件的打包需要用到css-loader和style-loader两个loader，css-loader只是用于加载css文件（并没有添加到页面），而style-loader则是将打包后的css代码以

// webpack.config.js
module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 输出路径
        filename: 'scripts/index.js'    //  输出文件名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正则表达式，表示.css后缀的文件
                use: ['style-loader','css-loader']   // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
            }
        ]
    }
};

3. 开始打包
在css目录下新建一个style.css文件，并写入样式：

/* style.css */
html{ background: #f00;}

然后在index.js中引入该文件：

// index.js
var module = require('./module.js');
require('../css/style.css');   // 引入css样式

alert(module.text);

最后输入命令npm start，打包完成后打开index.html页面后，你会发现除了弹出之前的“Hello Webpack!”外，页面背景颜色也变为红色，说明样式也已经打包成功。

三、自动化打包

通过上面的讲解你会发现，虽然我们已经将命令改成了npm start，然而实际操作上还是得每次手动输入命令打包，不开心。
我们能不能像以前不用Webpack时那样，写完了直接刷新页面就能看到效果呢？
答案当然是可以的，我们只需在webpack.config.js中添加watch: true就好。

module.exports = {
    entry: './src/scripts/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'scripts/index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    watch: true   // 监听修改自动打包
};