webpack开发环境和生产环境打包
// 开发环境webpack.config.js基础的配置
const path = require('path')
// 首先要安装该插件 npm i html-webpack-plugin -D
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development',
// 单文件入口
entry:'./src/index.js'
// 多文件入口，根据实际需求是单入口还是多入口
entry:{
index1:'./src/index1.js',
index2:'./src/index2.js'
},
// 单出口
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
},
// 多出口
output:{
path:path.join(__dirname,'dist'),
filename:"[name].js"
},
// 启动本地服务器,首先要下载: npm i webpack-dev-server -D
devServer:{
host:'localhost', // 主机名
port:8001, // 端口号
open:true // 启动服务后是否主动打开网页
}
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,'src','index.html'), // 模板文件路径
filename:'index.html', // 打包之后的文件名
minify:{
minimize:true //打包为最小值
minifycss:true // 压缩html模板中的css样式
...
}
})
],
module:{
// 定义规则
rules:[
// 定义babel转义规则
{
test:/\.js$/, // 以.js结尾的文件都通过babel转义
loader:['babel-loader'], // 使用的插件
include:path.join(__dirname,'src'), // 包括src中的.js结尾的文件
exclude:/node_modules/ // 不包括node_modules中的js文件
}
// 以 .css结尾的文件使用style-loader，css-loader插件打包
// 要 npm i style-loader css-loader -D 安装插件打包css文件
{
test:/\.css$/,
use:[
{
loader:'style-loader',
}，
{
loader:'css-loader'
},
// 给不同浏览器添加对应内核的前缀, npm i postcss-loader autoprefixer 安装postcss-loader 和autoprefixer
{
loader:'postcss-loader',
options:[
plugins[require('autoprefixer')({
browsers:[
'ie >= 8',
'firfox >= 20',
'safari >= 5',
'android >=4',
'Ios >=6',
'last 4 version'
]
})]
]
}
]
},
]
}
}
以上为其中一部分,
注意：module中的rules的babel转义部分，需要有几个步骤：
1、npm i babel-loader @babel/core @babel/preset-env -D 安装这3个插件
2、根目录下新建.babelrc文件
{
"presets":["@babel/preset-env"]
}
生产环境，根目录新建一个webpack.prod.js，把生产环境的webpack.config.js中的内容复制过来，在此基础上修改
修改：
1、mode:‘production’
2、输入文件名:
output:{
path:path.join(__dirname,'dist'),
// 相当与在输出文件名拼接一个hash计算值，如果代码变了文件名就改变，如果代码没改变，文件名就不改变
filename:'bundle.[contenthash].js'
},
3、生产环境不需要devServer本地服务器，移除掉
4、根目录下的package.json修改build命令
webpack.prod.js总览:
const path = require('path')
// 首先要安装该插件 npm i html-webpack-plugin -D
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'production',
// 单文件入口
entry:'./src/index.js'
// 多文件入口，根据实际需求是单入口还是多入口
entry:{
index1:'./src/index1.js',
index2:'./src/index2.js'
},
// 单出口
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
},
// 多出口
output:{
path:path.join(__dirname,'dist'),
filename:"[name].[contenthash].js"
},
plugins:[
new HtmlWebpackPlugin({
template:path.join(__dirname,'src','index.html'), // 模板文件路径
filename:'index.html', // 打包之后的文件名
minify:{
minimize:true //打包为最小值
minifycss:true // 压缩html模板中的css样式
...
}
})
],
module:{
// 定义规则
rules:[
// 定义babel转义规则
{
test:/\.js$/, // 以.js结尾的文件都通过babel转义
loader:['babel-loader'], // 使用的插件
include:path.join(__dirname,'src'), // 包括src中的.js结尾的文件
exclude:/node_modules/ // 不包括node_modules中的js文件
}
// 以 .css结尾的文件使用style-loader，css-loader插件打包
// 要 npm i style-loader css-loader -D 安装插件打包css文件
{
test:/\.css$/,
use:[
{
loader:'style-loader',
}，
{
loader:'css-loader'
},
// 给不同浏览器添加对应内核的前缀, npm i postcss-loader autoprefixer 安装postcss-loader 和autoprefixer
{
loader:'postcss-loader',
options:[
plugins[require('autoprefixer')({
browsers:[
'ie >= 8',
'firfox >= 20',
'safari >= 5',
'android >=4',
'Ios >=6',
'last 4 version'
]
})]
]
}
]
},
]
}
}
还有关于上线公共路径的配置，后续补上