process.env
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。如果想要深入的了解process.env，移步至此：理解webpack之process.env。再次就不过多讨论这个，只是下面会用到这变量。
开始安装需要的包：
需要的模块有：
webpack
webpack-cli
webpack-dev-server
node-sass
需要的loader：
style-loader 样式写入页面的header标签内
css-loader
sass-loader
file-loader 解决js、css中引入的图片
html-loader 解决html中引入图片问题
需要的plugins：
- clean-webpack-plugin 删除压缩包，删除输出位置生成的文件
- mini-css-extract-plugin 提取css到单独文件的插件
- optimize-css-assets-webpack-plugin 引入压缩css的插件
webpack.config.js
//引入路径插件
const path = require("path");
//引入webpack
const webpack = require("webpack");
//删除压缩包，删除输出位置生成的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//引入导出html插件
const htmlplugin = require('html-webpack-plugin');
//引入压缩css的插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//提取css到单独文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
console.log(process.env.NODE_ENV)
module.exports = {
mode: "development",
//入口
entry: {
home: "./src/main/index.js",
test: "./src/main/test.js"
},
//出口文件
output: {
filename: devMode?'js/[name].boundle.js':'js/[name].[hash:4].boundle.js',
// filename: 'js/[name].boundle.js',
path: path.join(__dirname, "dist")
},
//便于调试
devtool: 'inline-source-map',
//服务
devServer: {
contentBase: path.join(__dirname, 'dist'), // 告诉服务器从哪个目录中提供内容。只有在你想要提供静态文件时才需要。
// publicPath:path.join(__dirname, 'dist'), // 将用于确定应该从哪里提供 bundle，并且此选项优先。 此路径下的打包文件可在浏览器中访问。
port: 9002,
historyApiFallback: true, //当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
// progress: true,// 打包过程
overlay: true,
hot: true, //热更新
// hotOnly: true // 如果模块热替换功能不生效，则不刷新网页
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: true,
// publicPath: '../',
hmr: true,
},
},
'css-loader',
'sass-loader',
],
},
{
test: /\.(jpg|png|gif|svg|webp|jpeg)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
publicPath: '/images/',
outputPath: 'images/'
}
}
]
},
{
test: /\.(html|ejs)$/,
use: [
{
loader: "html-loader",
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode?'style/[name].css':'style/[name].[hash:4].css',//都提到build目录下的css目录中
chunkFilename: devMode?'style/[id].css':'style/[id].[hash:4].css',
// ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
//压缩css
// new OptimizeCssAssetsPlugin(),
//清除生成的文件
new CleanWebpackPlugin(),
//html单独导出插件——首页
new htmlplugin({
title: 'home-1',
filename: 'index.html',//输出后的文件名称
template: path.join(__dirname, 'src', 'index.html'),//打包html模版的路径和文件名称
// favicon:'./pages/images/favicon.ico',//页签图标
chunks: ['home'],//需要引入的js文件名称
// inject: true,
// hash:true, //避免缓存js。因为在MiniCssExtractPlugin已经添加的hash了，所以此处就不需要了
// minify: {//对html文件进行压缩
// removeAttributeQuotes: true, //去掉属性的双引号
// removeComments: true,//去掉注释
// collapseWhitespace: true,//去掉空白
// }
}),
//html单独导出插件——test页
new htmlplugin({
title: 'test-1',
filename: "pages/test.html",
template: "./src/pages/test.html",
chunks: ['test'],
// inject: true,
// hash:true,
// minify: {//压缩
// removeComments: true,
// collapseWhitespace: true
// }
})
]
}
package.json
"scripts": {
"dev": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack"
},
来张项目结构图：
image.png
最后再打包浏览器显示截图：
image.png
注：最后有点需要说下，如果你打开多个端口，有端口号一样的话，那么热更新就会失效的，这个坑我踩了，因为没有报错提示，所以花了点时间才发现的