webpack4：如何搭建
2018-08-26 #webpack #webpack配置 字数统计：14k 字 阅读时长 ≈ 13 分钟 
一直想学习webpack的环境配置，由于种种原因，一直拖到了这周才终于下定决定要弄明白。
目前已经搭好了一个webpack4的react环境，虽然是从0到1搭建的，但过程中参考了create-react-app和vue-cli的webpack配置。

第一步: 基本使用
首先新建一个目录，然后

1
2
npm init -y
npm i webpack webpack-cli --save-dev

最后目录结构为 

1
2
3
4
src
|- index.js
package.json
package-lock.json

现在打开package.json为scripts填充script脚本

1
2
"start": "webpack --mode development",
"build": "webpack --mode production"

在src/index.js：console.log('hello world');
尝试运行
npm run start会发现在目录中生成一个dist/main.js文件，打开并发现里面的代码未压缩。
npm run build会发现在目录中生成一个dist/main.js文件，打开并发现里面的代码已压缩。
这是因为webapck4的默认模式development和production，已经帮我们做好了某些事。具体可以参考

https://webpack.docschina.org/concepts/mode/

第二步: react应用

1
2
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader@^8.0.0-beta --save-dev
npm i react react-dom -s

新建webpack.config.js内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

新建.babelrc内容为:

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

新建index.html内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>react</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/main.js"></script>
</body>
</html>

然后npm run dev，打开index.html，发现hello world。
这就完成了webpack配置的react的基本应用。

第三步: 增加配置

1
npm i html-webpack-plugin mini-css-extract-plugin --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');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
}

npm run dev之后，dist有index.html文件的产生，并且index.html里已经注入main.js的源

第4步: webapck-dev-server

要设置webpack dev server，请安装包:
npm i webpack-dev-server -s
有两种方式使用:
1.用命令行的方式:

1
2
3
4
"scripts": {
  "dev": "webpack-dev-server --mode development --open --color --compress --hot",
  "build: "webpack --mode production"
}

2.用配置文件的方式
新建devServer.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: 'localhost',
    port: 8001,
    open: true,
    overlay: false,
    publicPath: '/',
    proxy: {},
    quiet: true,
    inline: true,
    watchOptions: {
      poll: false,
    },
    progress: true
  },
}

在package.json中的scripts写着
"dev": "webpack-dev-server --mode development --config devServer.config.js"
注意：配置型的webpack dev server需要与webpack.config.js配合使用，可以使用webpack-merge

3.用node.js的方式

4.使用express和webpack-dev-middleware的方式

注：热更新，需要在webpack.config.js中的plugins加入new webpack.HotModuleReplacementPlugin()，(使用node.js的方式在入口entry需要增加require.resolve('webpack/hot/dev-server'))

后续增加，less，eslint，prettierrc如何配合webapck的使用

#webpack #webpack配置
下一页