zz-webpack-vue
vue版
webpack
打包工具,主要提供公共webpack
配置,快速接入最新最优webpack
配置
前言
- 目录结构及webpack配置修改遵循vue-cli生成模版的用法
- 兼容 ejs 模版语法
- 兼容单页面及多页面应用,简单的目录结构如下:
// 多页面应用my-project |__ src | |__ pages // 存放页面入口,用于多页面应用中 | | |__ detail // 例如,详情页 | | | |__ detail.vue // 详情页模版 | | | |__ detail.js // 详情页入口 | | |__ order // 例如,订单页 | | |__ order.vue // 订单页模版 | | |__ order.js // 订单页入口 | |__ main.js // 入口文件js,公共js |__ template // 存放模版文件 | |__ common // 公共模版 | |__ detail.ejs //详情页模版文件 | |__ order.ejs //订单页模版文件 // 单页面应用my-project |__ src | |__ App.vue // 入口模版 | |__ main.js // 入口文件 |__ template // 存放模版文件 |__ common // 公共模版 |__ index.ejs // 项目模版
使用步骤
安装
$ npm i -D zz-webpack-vue# 或 $ yarn add zz-webpack-vue
初始化-已有项目
在当前目录中生成配置文件
$ node_modules/zz-webpack-vue/bin/start
执行命令
# dev命令,依赖全局的 webpack及webpack-dev-server工具 $ webpack-dev-server --inline --progress --disable-host-check --public --config webpack-vue/build/dev.js # build命令, 如果需要设置环境变量为:NODE_ENV=production,推荐使用cross-env,可以兼容mac和windows $ cross-env NODE_ENV=production node webpack-vue/build/build.js
初始化-新项目
在当前目录中生成新项目模版
$ node_modules/zz-webpack-vue/bin/init
执行命令
# 进入新项目 $ cd webpack-vue-demo# 安装依赖 $ npm install# 开发 $ npm run dev# 打包 $ npm run build
webpack动态修改
主要是执行webpack功能及动态修改webpack配置
开发配置文件
例如,config/index.js
let path = moduleexports = // 基础配置 base: // 入口文件配置 entry: vendor:'react' 'react-dom' app: path externals: {} // 排除部分第三方组件不打包 cssModule: false // css module自动关闭,部分组件库使用此功能会加载不了样式,例如antd cssExtract: false // 提取css为单独的css文件,或者跟随chunk代码自动嵌入 <head>中,默认false,跟随chunk alias: {} // 设置别名 // 开发模式配置 dev: https: false // https功能,默认关闭, true/false host: 'localhost' // 本地启动地址 port: 8080 // 启动端口号 assetsPublicPath: '' // 访问虚拟路径,例如 http://localhost/Mzhuanzhuan/my-project/index.html proxyTable: {} // 代理 autoOpenBrowser: true // 启动时自动打开浏览器,默认开启,true/false useEslint: true // 开启eslint验证,配置模版时选择开启或关闭,true/false vconsole: false // 开启调试模式,默认关闭,true/false merge: {} //定义的webpack配置 // 构建模式配置 build: web: "webserver" // 存放所有的html文件 assetsPublicPath: 'https://img.static.com.cn/' // 静态资源路径 bundleAnalyzerReport: false // 开启代码分析报告功能,true/false,也可使用命令 npm run build --report cssSourceMap: false // 控制css的sourcemap jsSourceMap: true // 控制js的sourcemap assetsRoot: path // 打包生成的文件存放目录 inline:'app.css' 'manifest.js' // 自定义内联静态资源 performance: true // 性能限制,首次加载js+css不能超过400k, 单个文件大小不超过: 300k merge: {} //定义的webpack配置
开放接口
参数 | 类型 | 备注 |
---|---|---|
baseWebpackConfig | object | 公共webpack配置,可修改 |
devWebpackConfig | object | 开发环境webpack配置,可修改 |
prodWebpackConfig | object | 生产环境webpack配置,可修改 |
dev | function | 开发环境使用 |
build | function | 生产环境使用 |
- 本项目下虽然所有的webpack都可以替换成以前各个项目自己的配置文件,但为了统一性,不建议完全替换配置文件,应该遵循本插件配置文件规则
引入webpack插件
- 方法一
路径:build/index.js
// 引入 webpack 打包工具let webpackVue = // webpack公共配置let config = moduleexports =
- 方法二
直接修改config/index.js
配置
例如:
moduleexports = base: ... merge: entry: vendor:'react' 'react-dom' app:'./src/app.js' dev: ... merge: plugins: build: ... merge: plugins:
dev模式
路径:build/dev.js
执行命令:(命令需要自行配置)
$ npm run dev
代码:
// 执行 npm run devlet webpack = moduleexports = webpack
同样自定义添加配置也可以使用引入插件的方法二
build模式
路径:build/build.js
执行命令:(命令需要自行配置)
# 构建项目 $ npm run build
代码:
// 执行 npm run buildlet merge = let webpack = moduleexports = webpack
同样自定义添加配置也可以使用引入插件的方法二
test
自定义test
或者其他命令
-
package.json
中新增命令"scripts":"test": "cross-env NODE_ENV=production node build/test.js" -
build
文件夹中新建test.js
文件,内容与build.js
保持一致,例如let merge =let webpack =let offlineCfg =let webpackOffline = offlineCfgmoduleexports = webpack