webpack 从入门到放弃！( 二 )

错误信息大体的意思是说，在解析模块过程中遇到了非法字符，而且错误出现的位置就是在我们的 CSS 文件中。
出现这个错误的原因是因为内部默认只能够处理 JS 模块代码，也就是说在打包过程中，它默认把所有遇到的文件都当作代码进行解析，但是此处我们让处理的是 CSS 代码，而 CSS 代码是不符合语法的，所以自然会报出模块解析错误。
这里有一个非常重要的提示：You may need antothis file type,noaretothis file. （我们需要用适当的加载器来处理这种文件类型，而当前并没有配置一个可以用来处理此文件的加载器）。
根据这个错误说明，我们发现是用（加载器）来处理每个模块的，而内部默认的只能处理 JS 模块，如果需要加载其他类型的模块就需要配置不同的。
解决上面的问题需要的是一个可以加载 CSS 模块的，最常用到的是 css- 。我们需要通过 npm 先去安装这个，然后在配置文件中添加对应的配置，具体操作和配置如下所示：
$ npm install css-loader --save-dev # or yarn add css-loader --dev
// ./webpack.config.jsmodule.exports = {entry: './src/main.css',output: {filename: 'bundle.js'},module: {rules: [{test: /\.css$/, // 根据打包过程中所遇到文件路径匹配是否使用这个 loaderuse: 'css-loader' // 指定具体的 loader}]}}
在配置对象的属性中添加一个 rules 数组。这个数组就是我们针对资源模块的加载规则配置，其中的每个规则对象都需要设置两个属性：
配置完成过后，我们回到命令行终端重新运行打包命令，打包过程就不会再出现错误了，因为这时 CSS 文件会交给 css- 处理过后再由打包。
尝试在页面中使用这里输出的 .js 文件，会发现刚刚的这个 main.css 模块并没有工作。我们找到刚刚生成的 .js 文件，因为这个文件是打包后的结果，所有的模块都应该在这个文件中出现。由于默认打包入口在输出的结果中就是第一个模块，所以我们只需要看第一个模块目前是什么样的，如下图所示：
仔细阅读这个文件，你会发现 css- 的作用是将 CSS 模块转换为一个 JS 模块，具体的实现方法是将我们的 CSS 代码 push 到一个数组中，这个数组是由 css- 内部的一个模块提供的，但是整个过程并没有任何地方使用到了这个数组。
因此这里样式没有生效的原因是： css- 只会把 CSS 模块加载到 JS 代码中，而并不会使用这个模块。
所以这里我们还需要在 css- 的基础上再使用一个 style-，把 css- 转换后的结果通过 style 标签追加到页面上。
安装完 style- 之后，我们将配置文件中的 use 属性修改为一个数组，将 style- 也放进去。这里需要注意的是，一旦配置多个，执行顺序是从后往前执行的，所以这里一定要将 css- 放在最后，因为必须要 css- 先把 CSS 代码转换为 JS 模块，才可以正常打包，具体配置如下：
// ./webpack.config.jsmodule.exports = {entry: './src/main.css',output: {filename: 'bundle.js'},module: {rules: [{test: /\.css$/,// 对同一个模块使用多个 loader，注意顺序use: ['style-loader','css-loader']}]}}
配置完成之后，再次回到命令行重新打包，此时 .js 文件中会额外多出两个模块。篇幅的关系，我们这里不再仔细解读。style- 的作用总结一句话就是，将 css- 中所加载到的所有样式模块，通过创建 style 标签的方式添加到页面上。
导入资源模块
一般打包的入口还是。因为从某种程度上来说，打包入口就是应用的运行入口，而目前前端应用中的业务是由 JS 驱动的，所以更合理的做法还是把 JS 文件作为打包的入口，然后在 JS 代码中通过语句去加载 CSS 文件。