脚本宝典收集整理的这篇文章主要介绍了webpack开发Vue配置,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一直以来使用webpack都是用的别人的配置,这几天自己学习了一下。
项目地址:https://github.com/donghaohao...
npm init
安装依赖,这里我们开发vue项目,npm install vue --save
,然后是开发时的依赖npm install --save-dev
这里有个重点是写package.json里面的scripts,因为我们要分开发环境和生产环境。开发环境使用webpack-dev-server
热替换,生产环境需要压缩,加hash等。使用npm run dev 或 npm run build 就可以运行下面的脚本。
"dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
这里分为三个:webpack.base.config.js webpack.dev.config.js webpack.prod.config.js
entry设置入口文件,可以设置多个,就会打包成多个,vendors是我们如果引用了vue,jQuery等,就不会把这些和代码打包到一起,会另外生成vendor.js。
entry: {
main: './src/index.js',
vendors: ['vue']
},
输出目录,这里path是最后打包完的输出目录,publicPath是server上的目录,这个自行设置好路径。我们在开发模式的时候并不会输出到目录的。
webpack主要就是各种loader,这个可以参考我的github上的,需要解释的有两点,一是使用vue-loader时,因为需要使用postcss,所以下面需要这样写:
vue: {
autoprefixer: false,
postcss: [
nested(),
cssnext({ browsers: ['last 2 versions', 'Android >= 2.1', 'iOS >= 7.0'] }),
flexFallback(),
],
},
二个就是使用url-loader时,它会自动在图片后面加hash,强迫症患者表示不行,我们在开发模式下不加,生产模式下加。
// 开发模式
config.module.loaders.push({
test: /.(gif|jpg|png|jpeg|svg)??.*$/, loader: 'url-loader?name=[name].[ext]&limit=8192'
});
// 生产模式
config.module.loaders.push({
test: /.(gif|jpg|png|jpeg|svg)??.*$/, loader: 'url-loader?limit=8192'
});
preLoaders 就是提前处理,这里我们使用了eslint,需要检查书写规范,然后添加 .eslintrc
文件.
resolve,extensions就是你require的时候可以省略扩展名,alias就是别名,在require的时候直接使用别名,避免写的太长。
resolve: {
// 扩展,require时省略扩展名
extensions: ['', '.js', '.vue'],
// 别名
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
插件
ExtractTextPlugin
提取CSS。
HtmlWebpackPlugin
生产html,这个可以自己生成也可以指定模板,会将打包的js和css插入到html中,这个有好多其他参数,可自行搜索。
webpack.optimize.CommonsChunkPlugin
这个为了抽取前面vendor里的第三方库,打包成另外的文件。
webpack.optimize.UglifyJsPlugin
压缩代码。(生产模式)
CleanWebpackPlugin
这个是我最新发现的一个,主要是在打包到dist之前先删除以前的dist,因为加hash厚并不会覆盖。(生产模式)
这里使用了ES6,所以要配置一下.babelrc。
这里我只是增加了一些测试的项目文件,开发和生产都正常,如有需要可以自行添加其他目录。
以上是脚本宝典为你收集整理的webpack开发Vue配置全部内容,希望文章能够帮你解决webpack开发Vue配置所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。