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的代码。