Webpack配置文件一览

Webpack中配置文件是它的关键,绝大多数配置都在 webpack.config.js中,主要结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');

module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html'})
],
mode: 'development'
};

顾名思义webpack是一个打包工具,webpack提供了一个思路,将依赖作为图来遍历。

  1. 首先就需要一个入口,也就是entry这个属性(可以有多个入口entry),
  2. output表示打包好的文件输出到哪。
  3. 在打包的过程中会遇到很多问题,首先就是如果这个依赖webpack不认识怎么办,这时就需要loader将符合rule的require()/import依赖通过指定loader打包到包里, test用于测试是否符合,use设置对应的loader。
  4. 尽管loader能够解决不认识的文件打包,但是还是需要一些plugins来做其他的任务,比如HtmlWebpackPlugin用于将打包好的bundle注入到html中。
  5. mode用于触发webpack不同级别的优化,可选development, production or none

webpack安装配置

1
2
npm install --save-dev webpack
npm install --save-dev webpack-cli // webpack4需要安装这个

然后在package.json里添加运行命令

1
2
3
"scripts": {
"start": "webpack --config webpack.config.js"
}

react相关配置

因为react的语法是ES6,所以需要babel来转译为ES5,所以需要安装下面的包

1
2
npm install --save react react-dom
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
  • babel-loader:用于使用babel来转译,后面的preset是语言相关
  • @babel/preset-env:用于将ES6转译为ES6
  • @babel/preset-react:将react语法的JSX转译为JS

因为需要babel转译,所以在目录下创建babel配置文件.babelrc,主要是使用下面的预设(preset),预设不对会报错,比如新版本的babel系列变成@开头、babel-preset-es2015废止

1
2
3
4
5
6
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

这是就要修改webpack.conf.js中加载器配置,需要排除node_modules文件夹, 修改resolve,这样不用在import的时候还要添加文件类型尾缀

1
2
3
4
5
6
7
8
module: {
rules: [
{ test:/\.js/, use: 'babel-loader', exclude: /node_modules/}
]
},
resolve: {
extensions: ['', '.js', 'jsx']
}

参考链接

安装react

1
npm i react react-dom --save-dev

使用Prop Types声明compoent的props类型

1
npm i prop-types --save-dev

此时webpack.config.js如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './index.js',
output: {
filename: 'shaoshuai.js',
},
module: {
rules: [
{
test:/\.(js|jsx)/,
use: 'babel-loader',
exclude: /node_modules/,
}
]
},
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'shaoshuai',
template: "./index.html",
filename: 'index.html'
})
],
mode: 'development',
}

html-webpack-plugin 自动注入

这个webpack插件创建HTML文件,并且把包路径名称写入到HTML中。安装方式如下:

1
2
npm i --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin

webpack dev server自动刷新页面

不需要每次都npm build来编译好,而是使用webpack-dev-server

1
npm i webpack-dev-server --save-dev

然后在package.json里面添加

1
"start": "webpack-dev-server --open --mode development"

支持scss

需要安装sass-loader

1
npm install sass-loader node-sass --save-dev

需要css-loader(用于解析@import和url())、style-loader(超多功能,我看都是和把css当成js加载有关)

1
npm install style-loader css-loader --save-dev

最后在webpack config里增加loader配置

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}]
}
};