这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
webpack配置
- 入口（entry）及出口（output）配置
前面一篇文章已经介绍了webpack的四个核心概念：入口，出口，loader和插件，下面围绕这四个核心概念，我们来对webpack进行手动配置
- 默认情况下我们运行在webpack打包时，webpack会把src下面的index.js作为入口文件；
- 打包后会默认生产一个dist目录，里面生成一个main.js文件
- 如果我们想手动指定入口文件和输出目录及文件，那么可以手动修改配置文件的方式来实现
- 在webpack项目下新建一个webpack.config.js文件，该文件一个配置文件，webpack命令在执行时会自动检查配置文件。
- 该文件遵循的是node 的commonJS规范，通过module.exports导出
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry:"./src/index2.js",//把index2作为入口文件
output:{
filename:'bundle.[hash:8].js',//输出文件，中括号内生成一个8位的hash随机数，避免缓存
path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
},
plugins:[
new CleanWebpackPlugin()//这里还可以设置哪些能删，哪些不能删除
]
}
- html-webpack-plugin插件 - 自动引入打包文件
- 每次打包后都会生成一个全新的出口文件，那么我们就得每次都要去修改html模板文件来重新引入打包好的新的js文件，每次操作都很麻烦，这时我们就可以借助html-webpack-plugin插件来自动帮我们把打包好的js文件引入到html模板中
const path = require('path');
const {HtmlWebpackPlugin} = require('html-webpack-plugin');
module.exports = {
entry:"./src/index2.js",//把index2作为入口文件
output:{
filename:'bundle.[hash:8].js',//输出文件，中括号内生成一个8位的hash随机数，避免缓存
path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
},
plugins:[
new HtmlWebpackPlugin()//自动将打包好的js文件导入的html模板文件中
]
}
- clean-webpack-plugin插件 - 自动清除打包文件
- 每次运行webpack打包时默认会生成dist目录，但是每次打包时里面的内容不会被清空，上一次打包的文件还会保留着，这样就会导致打包次数越多生成的文件越多，这时需要借助一个插件（clean-webpack-plugin）来清除老的文件
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
entry:"./src/index2.js",//把index2作为入口文件
output:{
filename:'bundle.[hash:8].js',//输出文件，中括号内生成一个8位的hash随机数，避免缓存
path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
},
plugins:[
new CleanWebpackPlugin()//这里还可以设置哪些能删，哪些不能删除
]
}
- webpack-dev-server - 创建本地服务器，自动重新构建并自动打开浏览器
- 安装： npm install webpack-dev-server -D
- webpack-dev-server插件可以自动的创建一个本地服务，为我们的代码提供一个运行环境，类似IIS/apache等
- 还可以通过该插件实现自动构建和自动打开浏览器
- 要想使用该插件，除了需要在webpack.config.js配置文件配置以外，还需要在package.json文件中配置启动命令。
- 然后通过npm run [devserver]就可以直接启动了
//webpack.config.js
module.exports = {
devServer:{//在内存中打包，所有的内容是在根目录下的
port: 8080,//设置端口号
open: true, //自动打开浏览器
compress: true, //代码压缩
contentBase:"static",//静态资源文件
hot: true,//自动刷新
}
}
//package.js
{
scripts:{
"devserver":"webpack-dev-server"
}
}
- 多入口多出口多html页面文件配置
- 有时候项目比较大比较复杂时，入口文件可能就不只一个了，比如一个项目中有index.js和other.js 两个文件都需要作为入口文件，这时就需要我们通过webpack.config.js配置文件进行配置来支持多入口
- 只需将entry改成对象键值对的方式配置即可
const path = require('path');
const {HtmlWebpackPlugin} = require('html-webpack-plugin');
module.exports = {
entry:{
index:"./src/index.js",
other:"./src/other.js"
}
output:{
filename:'[name].js',//输出文件，中括号中的name代表的就是上面entry中的index或other
path: path.resolve(__dirname, "dist") //输出目录 __dirname当前路径， resolve将两个路径合并
},
plugins:[
new HtmlWebpackPlugin({
template:"./index.html",//依赖的模板文件
hash:true,
minify:{
removeAttributeQuotes: true,//删除引号
collapseWhitespace: true,//删除空格
},
filename:'index.html',//打包后的HTML文件名
chunks:['index']//将打包后的index.js引入到index.html中
}),//自动将打包好的js文件导入的html模板文件中
new HtmlWebpackPlugin({
template:"./other.html",//依赖的模板文件
hash:true,
minify:{
removeAttributeQuotes: true,//删除引号
collapseWhitespace: true,//删除空格
},
filename:'other.html',//打包后的HTML文件名
chunks:['other']//将打包后的other.js引入到other.html中
}),//自动将打包好的js文件导入的html模板文件中
]
}
上面的代码中如果有很多个html页面，那么就需要配置多个HtmlWebpackPlugin，这样就很麻烦了，那么我们可以封装一个方法，后面如果有很多HTML页面的话我们之间调用封装好的方法就可以了。
let htmlPlugins = ['index','other'].map(chunkName=>{
return new HtmlWebpackPlugin({
template: `./src/${chunkName}.html`,
filename:`${chunkName}.html`,
chunks:[chunkName]
});
});
plugins:[
...htmlPlugins
]
