标签: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