一个独立的vue2+webpack2 构建,开发配置工具
- 独立的配置项依赖 做专业的事
- 支持自定义配置,方便扩展。便于原始项目迁移
import { server , compile} from 'vuex-cli-webpack'
//调用
server()
compile()
命令行调用
# 启动开发服务器
$ node ./node_modules/.bin/vserver
# 编译代码
$ node ./node_modules/.bin/vcompile
默认的配置是按照目前流行的配置方案来做的,实际开发中多少会需要修改
这个时候,你只需要在项目根目录下创建config
文件夹,并且在文件夹下添加对应的配置文件即可
config
├── development.conf.js # 开发环境配置
├── production.conf.js # 生产环境配置
├── ... ... # 测试等
└── webpack.config.js # webpack配置
开发环境下的配置文件
// ======================================================
// Overrides when NODE_ENV === 'development'
// ======================================================
module.exports = config => ({
compiler_public_path: '/',
compiler_devtool: 'eval'
})
生产环境下的配置文件
// ======================================================
// Overrides when NODE_ENV === 'production'
// ======================================================
module.exports = config => ({
compiler_public_path: '',
compiler_devtool: false,
compiler_hash_type: 'chunkhash',
compiler_html_minify: true,
compiler_stats: {
chunks: true,
chunkModules: true,
colors: true
}
})
- compiler_public_path:webpack.publicPath 用法相同
- compiler_hash_type:设置文件名中hash命名类型
- compiler_html_minify:设置html,js,css是否压缩
默认提供了一套配置,当需要修改配置请在项目根路径下config
目录中添加 webpack.config.js
// ======================================================
// webpack.config.js
// ======================================================
module.exports = ({ paths }) => {
entry: {
app: './src/main.js'
},
resolve: {
alias: {
"store": paths.src('store'),
"components": paths.src('components')
}
}
}