最近开始学习webpack的正确打开姿势,先总结一下webpack一些比较重要的入门配置,在博客的最后会有完整的webpack.config.js的栗子。
1.什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用
2.工作方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件
3.使用准备
进入项目根目录
npm init
npm install webpack --save-dev [--no-optional]
*最新版本npm需要添加–no-optional选项,我当前npm版本是5.3.0
*–save-dev意思是把模块装到当前项目中,init初始化后在
项目根目录会有node_modules文件夹,模块就装到这个文件夹中
4.使用webpack
webpack {entry file} {destination for bundled file}
*{extry file}填写入口文件的路径
*{destination for bundled file}填写打包文件的存放路径
*填写路径的时候不用添加{}
5.通过配置文件使用webpack
在项目根目录下新建webpack.config.js
webpack.config.js文件内容:
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
在终端执行webpack
entry的几种写法
1.entry:"url"
2.entry:["url","url",....]
3.entry:{
namea:"url",
nameb:"url",
......
}
output多输出
output:{
filename:"[name].js"/"[hash].js"/"[chunkhash].js",
path:"..."
}
output将js、index.html生成到不同路径
output:{
path:"./dist",
filename:"js/[name].js"
}
//index.html生成到dist目录,js生成到dist/js目录下
output publicPath参数
output:{
path:"./dist",
filename:"js/[name].js",
publicPath:"http://cdn.com/"
}
//html中引用js的路径变为http://cdn.com/js/[name].js
6.更快捷的执行打包
npm引导任务执行
修改package.json中的script
"scripts": {
"start":"webpack"
}
在终端输入npm start即可
*package.json 是npm的配置文件,webpack.config.js 是webpack的配置文件
7.生成source maps
在配置文件webpack.config.js中配置devtool,有四种不同的选项
8.使用webpack构建本地服务器
功能:浏览器监听代码修改,并自动刷新显示修改后的结果
安装为项目依赖:npm install –save-dev webpack-dev-server
添加以上设置到webpack配置文件
在npm配置文件中的script对象中添加:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}
在终端输入npm run server即可在本地的8080端口查看结果
*这里我发现如果在win10下ctrl+c退出其实服务器尚未关闭,再次运行服务器会发现端口改变(未指定端口)或者报错(指定端口),访问原端口依然可以看见项目
9.html-webpack-plugin的使用
先通过npm安装
npm install html-webpack-plugin --save-dev --no-optional
再在webpack.config.js中引入该插件
var htmlWebpackPlugin=require("html-webpack-plugin");
在module.exports中配置plugins选项
plugins:[
new htmlWebpackPlugin({
template:"index.html",//参照的模板html
filename:"index.html",//生成html文件名称
inject:"body"//js文件插入到head还是body
})
]
传递参数
plugins:[
new htmlWebpackPlugin({
template:"index.html",//参照的模板html
filename:"index.html",//生成html文件名称
inject:"body",//js文件插入到head还是body
title:"plugins中设置的title",
date:new Date()
})
]
在模板html中,通过<%= htmlWebpackPlugin.options.title %>的形式获取参数
如果需要把不同js插入到html的不同位置
inject设为false
在对应位置插入script标签,src写为<%= htmlWebpackPlugin.files.chunks.js_name.entry %>
压缩html文件
在plugins中配置minify,具体配置参照https://www.npmjs.com/package/html-webpack-plugin
处理多页面应用
entry:{
main:"./app/main.js",
a:"./app/a.js",
b:"./app/b.js",
c:"./app/c.js"
}
plugins:[
new htmlWebpackPlugin({
template:"index.html",//参照的模板html
filename:"index.html",//生成html文件名称
inject:"body",//js文件插入到head还是body
title:"plugins中设置的title",
date:new Date(),
chunks:["main","a"]
//指定该html需要引入的chunk,值为数组,可以使用excludeChunks排除不需要的chunk
}),
new htmlWebpackPlugin({
template:"index.html",
filename:"b.html",
inject:"body",
title:"this is b.html",
date:new Date(),
chunks:["b"]
}),
new htmlWebpackPlugin({
template:"index.html",
filename:"c.html",
inject:"body",
title:"this is c.html",
date:new Date(),
chunks:["c"]
})
]
webpack.config.js实例
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
devtool:"eval-source-map",
entry:{
main:"./app/main.js",
a:"./app/a.js",
b:"./app/b.js",
c:"./app/c.js"
},//已多次提及的唯一入口文件
output:{
path:__dirname+"/public",//打包后的文件存放的地方
filename:"js/[name].js"//打包后输出文件的文件名
},
devServer:{
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
port:8080
},
module:{
rules:[
// {test:/\.css$/,use:['style-loader','css-loader']}
]
},
plugins:[
new htmlWebpackPlugin({
template:"index.html",//参照的模板html
filename:"index.html",//生成html文件名称
inject:"body",//js文件插入到head还是body
title:"plugins中设置的title",
date:new Date(),
chunks:["main","a"]
//指定该html需要引入的chunk,值为数组,可以使用excludeChunks排除不需要的chunk
}),
new htmlWebpackPlugin({
template:"index.html",
filename:"b.html",
inject:"body",
title:"this is b.html",
date:new Date(),
chunks:["b"]
}),
new htmlWebpackPlugin({
template:"index.html",
filename:"c.html",
inject:"body",
title:"this is c.html",
date:new Date(),
chunks:["c"]
})
]
}