用--watch监听打包文件
package.json
用WebpackDevServer自动监听自动刷新
配置webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist'
//服务器启动在那一个文件夹下
},
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
}, {
test: /\.(eot|ttf|svg|woff|woff2)$/,
use: {
loader: 'file-loader'
}
}, {
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
},
'sass-loader',
'postcss-loader'
]
}]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
//设置src目录下的index.html文件为模版
}), new CleanWebpackPlugin()]
}
设置package.json,映射命令
运行 npm run start 启动
devServer的一些配置选项
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
//服务器启动在那一个文件夹下
open: true,
//devserver启动时,自动打开浏览器
port: 8080
//默认端口号
},
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
}
}, {
test: /\.(eot|ttf|svg|woff|woff2)$/,
use: {
loader: 'file-loader'
}
}, {
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
}
},
'sass-loader',
'postcss-loader'
]
}]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
//设置src目录下的index.html文件为模版
}), new CleanWebpackPlugin()]
}