（七） webpack学习之——创建devServer开发环境
2021-01-16 20:15
标签：ssas ESS src try base clean temp ade 端口号 在前面的学习中，每次修改一次源代码，都需要经过一次webpack打包才能生效。因可以配置devServer，从而可以使修改的代码能立刻生效。一个简单的devServer配置如下 在package.json里配置脚本 即可启动。 （七） webpack学习之——创建devServer开发环境 标签：ssas ESS src try base clean temp ade 端口号 原文地址：https://www.cnblogs.com/qiaoyun/p/13375138.html 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 };
"scripts": {
"dev": "webpack-dev-server"
},
上一篇：HTML标签区别
下一篇：动态网站开发所需的Web构建
文章标题：（七） webpack学习之——创建devServer开发环境
文章链接：http://soscw.com/index.php/essay/42874.html