本地服务器
$_> npm i -D webpack-dev-server
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugins = require('clean-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
util: './src/util.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'js/[name].bundle.js',
},
module: {
rules: [{
test: /\.(css)$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(jpeg|png|jpg)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/imgs/',
}
}
}, {
test: /\.(html)$/,
use: { loader: 'html-loader' }
}]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
inject: 'body',
chunks: ['index']
}),
new cleanWebpackPlugins(['dist'])
],
devServer: {
contentBase: path.join(__dirname, 'dist'), // 根路径
port: 8080,
historyApiFallback: {}, //访问不存在的路径不会报错,单页应用
proxy: { // 设置代理,跨域
'/api': { // http://localhost:8080/api
target: 'http://localhost:8080', // 请求的域名
changeOrigin: true,
secure: false,
logLevel: 'debug', // 控制台打印日志
headers: {}, // http头部
}
}
},
mode: 'development'
};
// package.json
"scripts":{
"server": "webpack-dev-server --open"
}
$_> npm run server
模块热更新
不用刷新即可更新某部分
$_> npm i -D webpack-dev-server
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugins = require('clean-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
util: './src/util.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'js/[name].bundle.js',
},
module: {
rules: [{
test: /\.(css)$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(jpeg|png|jpg)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/imgs/',
}
}
}, {
test: /\.(html)$/,
use: { loader: 'html-loader' }
}]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/html/index.html',
inject: 'body',
chunks: ['index']
}),
new cleanWebpackPlugins(['dist']),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 8080,
hot: true,
},
mode: 'development'
};
直接修改index.js css即可更新
source-map
可以看到未被打包的源文件,方便定位bug
js: 需开启本地服务器
css
module: {
rules: [{
test: /\.(css)$/,
use: [{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
}, {
test: /\.(jpeg|png|jpg)$/,
use: {
loader: 'file-loader',
options: {
outputPath: 'assets/imgs/',
}
}
}, {
test: /\.(html)$/,
use: { loader: 'html-loader' }
}]
},
区分开发环境和线上环境
开发环境不需要压缩代码,生成环境需要,所以有必要分别配置
- 使用webpack-merge 合并配置对象。如果是发布环境,就修改配置
// webpack.config.js
let isProduction = false; //是否发布环境
let baseConfig = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
},
plugins: [
new webpack.DefinePlugin({ // 全局变量,在项目里的js都可以访问到
isProduction: isProduction
})
],
mode: isProduction ? 'production' :'development',
devtool: isProduction?'':'inline-source-map',
};
if (isProduction) { // 如果是发布环境就处理js
baseConfig = merge(baseConfig,{ //
module: {
rules:[{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
}
})
}
module.exports = baseConfig;