webpack最佳入门实践系列(05)
5.loader
5.1.什么是loader?
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图可以直接引用的模块。
在更高层面,在 webpack 的配置中 loader 有两个目标。
- 识别出应该被对应的 loader 进行转换的那些文件。(使用 test 属性)
- 转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use 属性)
总结:有了loader,webpack就会把非js文件也看成是模块,并且可以引用它
5.2.支持css文件打包
安装css-loader
npm install css-loader --save-dev
修改webpack.config.js文件,添加css-loader配置项
module:{ rules: [ { test: /\.css$/, use: ['css-loader'] } ] }
完整webpack.config.js文件:
const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, plugins: [ new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html' }) ], devServer:{ open: true, contentBase: './dist' }, module:{ rules: [ { test: /\.css$/, use: ['css-loader'] } ] } }
配置完成后,测试是否生效,首先新建index.css,添加内容:
body{ background: #009f95 }
在index.js文件中引入 index.css文件
import module_1 from './module_1' import module_2 from './module_2' import module_3 from './module_3' document.write("hello world") import "./index.css" module_1() module_2() module_3()
运行命令,查看效果:
npm start
此时,发现并没有任何效果,原因是css-loader只负责把css文件打包到js中,并没有加入到index.html结构中, 还需要引入style-loader来处理,让style样式加入到index.html结构中
npm install style-loader --save-dev
接下来,需要把style-loader配置到webpack.config.js文件中
module:{ rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] } ] }
再次运行,查看结果
npm start