webpack学习之——创建devServer开发环境

Posted 2020-12-18 当…风已不再

在前面的学习中，每次修改一次源代码，都需要经过一次webpack打包才能生效。因可以配置devServer，从而可以使修改的代码能立刻生效。一个简单的devServer配置如下

 1 const path = require(‘path‘);
 2 const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
 3 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);;
 4 process.env.NODE_ENV = ‘development‘;
 5 module.exports = {
 6   entry: ‘./src/main.js‘,
 7   output: {
 8     filename: ‘js/index.js‘,
 9     path: path.resolve(__dirname, ‘build‘),
10   },
11   module: {
12     rules: [
13       {
14         test: /.css$/,
15         use: [
16           {
17             loader: MiniCssExtractPlugin.loader,
18             options: {
19               publicPath: ‘../‘,
20             },
21 
22           },
23 
24           ‘css-loader‘,
25         ],
26       },
27       {
28         test: /.scss$/,
29         use: [
30           {
31             loader: MiniCssExtractPlugin.loader,
32             options: {
33               publicPath: ‘../‘,
34             },
35 
36           },
37           ‘css-loader‘,
38           ‘sass-loader‘,
39         ],
40       },
41       {
42         test: /.(jpg|png|gif)$/,
43         loader: ‘url-loader‘,
44         options: {
45           limit: 8 * 1024,
46           outputPath: ‘images‘,
47         },
48 
49       },
50       {
51         test: /.html$/,
52         loader: ‘html-loader‘,
53 
54       },
55       {
56         test: /.(eot|ttf|svg|woff)$/,
57         loader: ‘file-loader‘,
58         options: {
59           outputPath: ‘font/‘,
60         },
61 
62       },
63     ],
64   },
65   plugins: [
66     new CleanWebpackPlugin(),
67     new HtmlWebpackPlugin({
68       template: ‘./src/index.html‘,
69     }),
70     new MiniCssExtractPlugin({
71       filename: ‘css/css.css‘,
72 
73     }),
74     new OptimizeCssAssetsWebpackPlugin(),
75   ],
76   mode: ‘development‘,
77   devServer: {
78     // 从哪里提供内容
79     contentBase: path.resolve(__dirname, ‘build‘),
80     // 启动gizp压缩
81     compress: true,
82     // 端口号
83     port: 4000,
84     // 自动打开浏览器
85     open: true,
86   }
87 };

在package.json里配置脚本

"scripts": {
    "dev": "webpack-dev-server"
  },

即可启动。