如何用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,
公司主营业务:做网站、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出新乐免费做网站回馈大家。
一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。
github 地址
clone project
git clone git@github.com:naihe138/nvue.git
install
npm install or yarn
一、初始化项目
初始化项目,用vue-loader来打包.vue文件,html-webpack-plugin插件来导出html文件。
第一步我们很简单,就利用vue-loader 和 babel-loader 是把.vue文件打包出来,总共才40多行代码,看build/webpack.base.conf.js文件注释就看的懂。+++表示有省略的代码
module.exports = { +++ // 模块,loader module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', exclude: /node_modules/, include: resolve('src') }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, include: resolve('src') } ] } +++ }
运行 webpack --config build/webpack.base.conf.js
二、打包css和图片等资源
这里打包css以sass 为例,用到了mini-css-extract-plugin
插件提取css,用url-loader
来处理字体、图片、音频等资源。非常简单。如下代码,+++表示有省略的代码
+++ module.exports = { +++ // 模块,loader module: { rules: [ +++ { test: /\.s?css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }, { test: /.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[hash:7].[ext]' } } +++ ] }, // 插件 plugins: [ +++ new MiniCssExtractPlugin({ filename: 'static/css/[name].[hash].css', chunkFilename: 'static/css/[name].[hash].css' }) ] }
运行 webpack --config build/webpack.base.conf.js
三、配置热加载、代理等开发环境
通过build/config.js来设置开发配置。如下注释
const path = require('path') module.exports = { dev: { assetsSubDirectory: 'static', // 静态文件目录 assetsPublicPath: '/', // 相对文件路径 proxyTable: {}, host: 'localhost', port: '8000', autoOpenBrowser: false, // 是否自动打开浏览器 errorOverlay: true, // 浏览器错误提示遮罩层 notifyOnErrors: true, // 编译错误的时候通知提示,需要friendly-errors-webpack-plugin 配合 poll: false, useEslint: true, // 便宜使用eslint-loader模块 showEslintErrorsInOverlay: false, // eslint浏览器错误提示遮罩层 devtool: 'cheap-module-eval-source-map', // Source Maps cssSourceMap: true, // css Source Maps cacheBusting: false, // vue debugg 提示 } }
在webpack.dev.conf.js
中,通过webpack-dev-server
插件来开启热重载服务,同时配置自动补全css兼容代码的插件,postcss-loader
运行npm run dev
或者 yarn dev
就可以启动服务了
四、配置打包环境
通过build/config.js
来设置开发配置。如下注释
const path = require('path') module.exports = { +++ build: { // html模板 index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', // 生产环境的souce map productionSourceMap: false, devtool: '#source-map', // 开启静态文件的Gzip压缩 // 如果是true 的话 需要 npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // 打包完成显示包大小的状态分析 // `npm run build --report` bundleAnalyzerReport: process.env.npm_config_report } }
运行npm run build
或者 yarn build
就可以实现打包vue项目啦。
五、检查版本,优化打包输出和Eslint设置
在check-version.js
中用 shelljs 模块检查时候有npm命令, semver模块语义化版本号,然后在build.js合并webpack.prod.conf.js
的的配置,然后组在格式化输出。
// 检查时候有安装npm命令 if (shell.which('npm')) { versionRequirements.push({ name: 'npm', currentVersion: exec('npm --version'), versionRequirement: packageConfig.engines.npm }) } // 格式化输出 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n')
通过eslint-loader 来配置eslint的检查,建立.eslintrc.js去设置规则
{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src')], exclude: /node_modules/, options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } },
六、打包优化
1、添加DllPlugin和DllReferencePlugin来打包优化不变的库,
2、通过cache-loader来做loader的缓存,
3、通过UglifyJsPlugin的parallel来开启多线程打包
先运行npm run dll
然后 npm run build
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
分享标题:如何用webpack4带你实现一个vue的打包的项目
分享地址:http://pwwzsj.com/article/pcjdph.html