看到慕课网上照片画廊的一个项目效果不错，但由于版本太旧了，各种坑。这个项目用到react和webpack打包工具。之前react项目直接用create-react-app的方式搭建的架构，这次学习了一下webpack。
webpack是js程序的静态模块打包器。配置在webpack.config.js中。
核心有四点:
1.入口起点，即起始的位置，进入起点后，找出哪些模块和库事入口起点依赖的。这些依赖项随之被处理。
1
2
3
| module.exports = {
entry: './path/to/my/entry/file.js'
};
|
2.出口，即webpack从哪里输出它所创建的bundles及如何命名这些文件。
1
2
3
4
5
6
7
8
9
| const path = require('path');
module.exports = {
...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
|
3.loader,对模块源代码进行转换，将其他类型的语言转换为js，可以加载css到js中。
首先要npm install –save-dev相关loader,再在配置中指定loader。
1
2
3
4
5
6
7
8
9
大专栏 webpack核心概念>10
11
12
13
14
15
16
17
18
| module: {
rules: [
{
test: /.css$/, //正则匹配.css文件
use: [
{ loader: 'style-loader' }, //Adds CSS to the DOM by injecting a <style> tag
{
loader: 'css-loader', //css-loader 解释 @import 和 url() ，
//会 import/require() 后再解析它们。
options: {
modules: true
}
}
]
}
]
}
内联
|
4.插件，用于拓展webpack功能，如可以最小化生成文件等。用法如下：
1
2
3
4
5
6
7
8
| const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
同时在module.rules中添加plugins项。
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
|