码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-25 09:47:38      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:ssas   ESS   src   try   base   clean   temp   ade   端口号   

在前面的学习中,每次修改一次源代码,都需要经过一次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"
  },

即可启动。

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

标签:ssas   ESS   src   try   base   clean   temp   ade   端口号   

原文地址:https://www.cnblogs.com/qiaoyun/p/13375138.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!