webpack之loader

loader是啥
webpack只能处理js文件，对于其他文件的压缩处理需要借用loader，loader可以在import或加载模块时预处理文件。

示例

main.js中加入css文件的引入

require('../css/main.css');

function hello(){alert("hello");}
hello();

被引入的main.css文件内容

body{
	width: 100%;
	background-color: 'red';
}

执行下面命令，明晃晃的报错啊

C:\0_cute_wife\webpack_demo>npm run webpack

> webpack_demo@1.0.0 webpack C:\0_cute_wife\webpack_demo
> webpack --mode development --mode production --config webpack.config.js --progress --colors --display-module --display-reason

Hash: 00f36d0957cab85f89c5
Version: webpack 4.39.1
Time: 1247ms
Built at: 2019-08-21 17:26:45
 3 assets
Entrypoint main = main.bundle.js
Entrypoint pageOne = pageOne.bundle.js
Entrypoint pageTwo = pageTwo.bundle.js
[0] ./src/script/main.js 74 bytes {0} [built]
[1] ./src/css/main.css 259 bytes {0} [built] [failed] [1 error]
[2] ./src/script/pageOne.js 49 bytes {1} [built]
[3] ./src/script/pageTwo.js 49 bytes {2} [built]

ERROR in ./src/css/main.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
|       width: 100%;
| }
 @ ./src/script/main.js 1:0-26
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack_demo@1.0.0 webpack: `webpack --mode development --mode production --config webpack.config.js --progress --colors --display-module --display-reason`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack_demo@1.0.0 webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\apple\AppData\Roaming\npm-cache\_logs\2019-08-21T09_26_45_254Z-debug.log

解决问题
首先，需要执行下面命令安装loader，否则直接修改配置文件，加入module，会报错：Module not found: Error: Can’t resolve ‘css-loader’ in ‘C:\0_cute_wife\webpack_demo’

安装css-loader:

npm install --save-dev css-loader

其次，修改webpack.config.js文件，添加module段

var path = require("path");
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: {
		main: './src/script/main.js'
	},
	output: {
		path: path.resolve(__dirname,'./dist/js'),
		filename: '[name].bundle.js'
	},
	module:{
		rules: [
			{test: /\.css$/, use: 'css-loader'}
		]
	},
	plugins: [new htmlWebpackPlugin]
}

再次npm run webpack，成功
结果见下：

C:\0_cute_wife\webpack_demo>npm run webpack

> webpack_demo@1.0.0 webpack C:\0_cute_wife\webpack_demo
> webpack --mode development --mode production --config webpack.config.js --progress --colors --display-module --display-reason

Hash: 20e2be6fabe73d5884d7
Version: webpack 4.39.1
Time: 1661ms
Built at: 2019-08-21 17:35:01
            Asset       Size  Chunks             Chunk Names
       index.html  315 bytes          [emitted]
   main.bundle.js   1.87 KiB       0  [emitted]  main
pageOne.bundle.js  946 bytes       1  [emitted]  pageOne
pageTwo.bundle.js  946 bytes       2  [emitted]  pageTwo
Entrypoint main = main.bundle.js
Entrypoint pageOne = pageOne.bundle.js
Entrypoint pageTwo = pageTwo.bundle.js
[0] ./src/script/main.js 74 bytes {0} [built]
[1] ./src/css/main.css 169 bytes {0} [built]
[3] ./src/script/pageOne.js 49 bytes {1} [built]
[4] ./src/script/pageTwo.js 49 bytes {2} [built]
    + 1 hidden module
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

另外，查看目录下的文件，压缩文件main.bundle.js中出现css的代码。