微信小程序是多少钱_怎么用webpack4带你完成一个

阅读  ·  发布日期 2021-01-08 14:28  ·  admin
如何用webpack4带你实现一个vue的打包的项目       这篇文章主要介绍了如何用webpack4带你实现一个vue的打包的项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,

mit对应一个步骤。

github 地址

clone project

git clone git: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 Ma凡科抠图
 cssSourceMap: true, // css Source Ma凡科抠图
 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, '../'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 // 生产环境的souce map
 productionSourceMap: false,
 devtool: '#source-map',
 // 开启静态文件的Gzip压缩
 // 如果是true 的话 需要 npm install --pression-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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。