1.开发环境和生产环境的区别
development(开发环境):开发人员调试开发的一种环境:本地运行，方便调试，保持高效的开发； production(生产环境):发布上线的环境: 需要考虑到打包出来的包体积不能太大等问题导致线上响应慢的问题，所以需要使用插件等对打包进行压缩等优化
2.开发环境和生产环境的运行语句
npx写法
- development(开发环境):结合devServer开发服务器在终端输入 npx webpack serve运行项目
- production(生产环境):npx webpack对项目进行打包
npm写法
- 先在package.json写好运行指令
// --config 代表指定运行的文件在那里
"scripts": {
"start": "webpack serve --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},
- development(开发环境):
npm start(在一个npm管理项目中，一般默认有start的定义，且会经常使用，所以就在npm执行中通过npm start简化了npm run start的写法) - production(生产环境):npm run build
3.webpack配置
-
文件目录
-
babel配置
babel配置文件要放到项目根目录上,打包时babel会自动查找和读取配置内容
-
开发环境
const path = require('path'); //nodejs核心模块,专门处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry: './index.js',
// 输出
output: {
// 文件输出路径
// __dirname nodejs的变量,代表当前文件夹目录
path: path.resolve(__dirname, '../dist'),//绝对路径
// 入口文件打包输出文件名
filename: "js/app.js",
// 自动清空上次打包内容 原理:将整个path目录内容清空在进行打包
clean: true,
},
// 开发服务器:不会输出资源,在内存中编译打包的
devServer: {
static: './dist',
// host: '192.168.2.78',//启动服务器域名
// 启动gzip压缩
compress: true,
// 端口号
// port: 3584,//服务器端口号
open: true,// 自动打开浏览器
hot:true,//开启热模块替换(HMR) 开启后只会对修改的文件进行打包,不会整个项目打包一遍
},
//加载器
module: {
rules: [
{
test: /\.css$/i,
use: [
"style-loader", //将js中css通过创建style标签添加到html文件中生效
"css-loader",//讲css资源编译成commonjs的模块到js中
],
},
{
test: /\.less$/i,
// loader只能使用一个
use: [//use支持多个
'style-loader',
'css-loader',
'less-loader',
],
},
{
//webpack4处理资源的file-loader和url-loader在webpack5已内置
test: /\.(png|jpg|gif)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 60kb
}
},
generator: {
//生成图片名字 hash:id;ext:文件类型,原来是什么就是什么
filename: 'static/[hash:5][ext]'
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,//排除node_modules||bower_components js文件(不处理这些文件)
use: {
loader: 'babel-loader',
// options: {
// 预设 在webpackconfigjs的写法
// presets: ['@babel/preset-env']
// }
}
}
]
},
// 插件
plugins: [new HtmlWebpackPlugin({
// 模板, 以public/index.html文件创建新的html文件
// 新的html文件特点:1.结构和原来一致 2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
})],
// 模式
mode: 'development',
devtool:'cheap-module-source-map',//sourceMap会生成一个.map文件
}
-
生产环境
const path = require('path'); //nodejs核心模块,专门处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//提取css成单独文件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
function getStyleLoader(pre) {
return [
MiniCssExtractPlugin.loader,
"css-loader",//讲css资源编译成commonjs的模块到js中
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
/* 兼容内容的写法,在package.json添加以下内容,常用写法
"browserslist": [
"last 2 version", //兼容浏览器的最后第一第二个版本
"> 1%",//兼容99%浏览器
"not dead"//不要一些浏览器已经死了的版本
]
*/
'postcss-preset-env',
],
],
},
},
},
pre,
].filter(Boolean)
}
module.exports = {
//入口
entry: './index.js',
// 输出
output: {
// 文件输出路径
// __dirname nodejs的变量,代表当前文件夹目录
path: path.resolve(__dirname, '../dist'),//绝对路径
// 入口文件打包输出文件名
filename: "js/app.js",
// 自动清空上次打包内容 原理:将整个path目录内容清空在进行打包
clean: true,
},
//加载器
module: {
rules: [
{
test: /\.css$/i,
use: getStyleLoader(),
},
{
test: /\.less$/i,
// loader只能使用一个
use: getStyleLoader('less-loader'),
},
{
//webpack4处理资源的file-loader和url-loader在webpack5已内置
test: /\.(png|jpg|gif)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 60kb
}
},
generator: {
//生成图片名字 hash:id;ext:文件类型,原来是什么就是什么
filename: 'static/[hash:5][ext]'
}
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,//排除node_modules||bower_components js文件(不处理这些文件)
use: {
loader: 'babel-loader',
// options: {
// 预设 在webpackconfigjs的写法
// presets: ['@babel/preset-env']
// }
}
}
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
// 模板, 以public/index.html文件创建新的html文件
// 新的html文件特点:1.结构和原来一致 2.自动引入打包输出的资源
template: path.resolve(__dirname, "../public/index.html"),
}),
new MiniCssExtractPlugin({
filename: "static/css/app.css",
}),
new CssMinimizerPlugin(),
],
// 模式
mode: 'production',
devtool:'source-map',//sourceMap会生成一个.map文件
}
