tool_bluej_webpack4
v1.1.3
Published
蓝景脚手架webpack4.0
Downloads
39
Readme
#蓝景技术webpack脚手架
支持最新的webpack4.15.1打包
适用于单页应用、多页应用或vue应用
请保留原始目录结构,千万不要删除任何的文件夹
目录说明
/根目录
|——build webpack配置文件
|————customConfig.js用户自定义配置,可以在这里配置SPA或MPA等配置
|————dev.js 开发模式的webpack配置
|————pro.js 生产模式的webpack配置
|——src 源文件目录
|————assets 需要经过webpack处理的静态文件,例如img、css
|——images 图片存放处
|——scss scss或css文件存放处
|————js 主要的js或vue文件存放处
|————static 静态资源(例如字体图标库、json文件、第三方库等),不经过webpack处理
|————index.html 单页应用的html入口文件,如果多页,则多个html文件放在同级目录下
|——postcss.config.js postcss配置文件(自动加前缀)
|——.babelrc babel配置
|——package.json npm相关配置
使用说明
- 开发模式
会开启文件监听,热更新,预览web服务
npm run dev
- 生产模式
直接打包为最终版本文件,压缩合并图片,压缩CSS,压缩JS,公共代码分离等
npm run build
注意:生成的文件,默认是必须放在根目录下访问,才可以访问成功,例如
http://bgg.com/index.html
,那你就必须把dist目录下的文件,全部放在bgg.com域名所指向的根目录
build/customConfig.js配置文件说明
具体看代码注释即可
const config = {
//入口配置
entry: {
//入口文件,通常一个html一个入口
index: ["./src/js/index.js"], //入口1
index2: ["./src/js/index2.js"], //入口1
},
//入口文件最终生成存放目录(这里的/表示服务器地址的根,比如www.shuai.com/)
outputPublicPath:'/',
//多入口的配置
plugins : [
//自动注入相关文件到
new HtmlWebpackPlugin({
filename: "index.html", //目录相对于output.path
template: path.resolve(__dirname,"../src/index.html"),
chunks:['index','commons','runtime'],
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //删除空白符与换行符
removeAttributeQuotes: true //删除标签属性值的引号
},
favicon:path.resolve(__dirname,'../fav.ico'),
title: "页面1",
meta:{
"keywords":"蓝景脚手架1",
"description":"用webpack帮你快速搭建项目1"
}
}),
//自动注入相关文件到
new HtmlWebpackPlugin({
filename: "page2.html", //目录相对于output.path
chunks:['index2','commons','runtime'],
template: path.resolve(__dirname,"../src/page2.html"),
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //删除空白符与换行符
removeAttributeQuotes: true //删除标签属性值的引号
},
favicon:path.resolve(__dirname,'../fav.ico'),
title: "页面2", //页面标题
meta:{ //页面SEO设置
"keywords":"蓝景脚手架2",
"description":"用webpack帮你快速搭建项目2"
}
})
],
// 开发端口号
serverPort : 9000 ,
/* 设置网站类型 , true 单页模式 false 多页模式
多页模式下:
1. 监听html的变化
单页模式下:
1. 开发模式下不监听html的变化,主要依赖热更新
2. 生产模式下,开启optimization设置,包括抽取单独抽取公共样式,JS等,压缩代码等
*/
isSPA : true ,
//
resolve: {
//引入文件,可忽略后缀名
extensions: [".js", ".css", ".scss",".vue"],
//引入模块的别名
alias: {
"vue": "vue/dist/vue.min.js"
}
},
//可以把一些特别大的第三方库,在html页面以cdn全局引入的形式使用,但需要在这里定义一下,键名就是你的第三方库名字,值就是你引用该库所用的变量名
externals:{
'vue':'Vue',
'jquery':'jQuery'
}
}
参考文献:
webpack4官方
webpack4中文手册
babel
postcss插件
image-webpack-loader图片压缩
VueLoader
CopyWebpackPlugin复制文件
MiniCssPlugin提取公共CSS
UglifyJsPlugin压缩JS
OptimizeCSSAssetsPlugin压缩CSS
rimraf删除目录