侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

使用webpack搭建vue项目及注意事项

前端  /  管理员 发布于 4年前   326

有一句话叫“前人栽树后人乘凉”,还有一句话叫“如果说我看得比别人更远些,那是因为我站在巨人的肩膀上”。前一句是国人的俗语,后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢?是因为我刚开始用vue的时候,使用的是vue-cli来搭建vue项目,快速又好用;我刚开始用react的时候,使用的是create-react-app来搭建react项目,方便又省事。使用这些已有的脚手架来搭建项目,无可厚非,对于新手来说,也确实能快速构建,不做置评。

既然已经有了这些现成的脚手架了,为什么我们还热衷于自己来配置webpack来搭建构建项目呢?因为我们只有了解并学会了配置webpack,我们才能更好地在打包构建项目时将webpack的性能发挥到极致,才能根据自身项目的实际需求,配置有利于项目开发的各种工具、插件,提高我们的开发效率。比如我们在打包项目时,可以分析哪些地方降低了webpack的打包速度,别人打包速度需要花去十多秒、二十多秒,而你能将打包的速度提升至几秒,这就是你的优势。当然,涉及到webpack的运行原理以及开发自己的loader或plugin就可以自行去学习了哈,本文只带你配置一个webpack来搭建一个vue项目。

wepack作为一个“模块打包机”其实是依赖了庞大的插件体系,插件体系是webpack的核心,可以说,webpack的生态就是建立在众多插件之上的,而开发环境和生产打包环境依赖的插件还是有所不同的,先以开发环境为例

webpack.config.js:

const path = require('path');const Webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require("mini-css-extract-plugin");const VueLoaderPlugin = require('vue-loader/lib/plugin');const ProgressBarPlugin = require('progress-bar-webpack-plugin');const resolve = (dir) => { return path.join(__dirname, '..', dir)}const assetsPath = (_path) => { return path.join('static', _path)}const isEnvProduction = process.env.NODE_ENV == "production", port = 3003;module.exports = { mode: 'development', devtool: 'source-map', entry: resolve('src'), output: {  path: resolve('dist'),  filename: isEnvProduction ? assetsPath('js/[name]-[hash].js') : '[name]-[hash].js',  chunkFilename: isEnvProduction ? assetsPath('js/[name]-[chunkhash:5].min.js') : '[name]-[chunkhash:5].min.js',  publicPath: '/', }, resolve: {  extensions: ['*', '.js', '.vue'], //webpack2.x extensions[0]不能为空 resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀  alias: {   '@': resolve('src'),   // 'vue$': 'vue/dist/vue.esm.js'  }, }, //提取公共代码 optimization: {  splitChunks: {   cacheGroups: {    commons: {     test: /[\\/]node_modules[\\/]/, //表示默认拆分node_modules中的模块     name: "vendor", //提取出来的文件命名     chunks: "all",  //提取所有文件的公共部分     minChunks: 2,   //表示提取公共部分最少的文件数 模块被引用>=2次,拆分至vendors公共模块     minSize: 0,   //表示提取公共部分最小的大小 模块超过0k自动被抽离成公共模块    },   }  } }, module: {  rules: [   {    test: /\.vue$/,    use: ['vue-loader'],    exclude: /node_modules/,   },   {    test: /\.js$/,    loader: 'babel-loader',    exclude: /node_modules/,    query: {     "presets": ["@babel/env"],     "plugins":      ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-runtime"],    }   },   {    test: /\.(sa|sc|c)ss$/,    use: [     MiniCssExtractPlugin.loader,     'css-loader',     'postcss-loader',     'sass-loader',    ],   },   {    test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,    use: 'file-loader?name=' + (isEnvProduction ? assetsPath('fonts/[name].[hash:8].[ext]') : 'fonts/[name].[hash:8].[ext]')   },   {    test: /\.(jpg|jpeg|png|gif|ico|svg)$/,    loader: 'url-loader',    options: {     limit: 10000,     name: isEnvProduction ? assetsPath('images/[name].[hash:8].[ext]') : 'images/[name].[hash:8].[ext]',    }   },  ], }, plugins: [  new ProgressBarPlugin(),  new VueLoaderPlugin(),  //ProvidePlugin是webpack的内置模块,使用ProvidePlugin加载的模块在使用时将不再需要import和require进行引入  new Webpack.ProvidePlugin({   _: 'lodash',  }),  new HtmlWebpackPlugin({   template: './src/index.html', //文件路径及名称   filename: 'index.html',   //输出后的文件名称  }),  new MiniCssExtractPlugin({   filename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css",   chunkFilename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css", //默认就是取的以id或name为开头的css,所以可以加这行配置代码,也可以不加  }), ], devServer: {  port,  host: '0.0.0.0',  open: `http://localhost:${port}`,  stats: {   hash: false,   builtAt: false,   version: false,   modules: false,   children: false, ////解决类似Entrypoint undefined = index.html和Entrypoint mini-css-extract-plugin = *的警告   entrypoints: false,   colors: {    green: '\u001b[32m',    yellow: '\u001b[32m',   }  },  proxy: {   '/': {    target: '',    changeOrigin: true   }  },  inline: true,  compress: false,  disableHostCheck: true,  historyApiFallback: true, },}

关于配置中用到的一些插件的api就不一一展开详解了,唯一需要说明的一点是,配置中所用到的插件的版本基本都是最新的,而使用postcss-loader时,需要在项目的根目录新建一个postcss.config.js文件:

module.exports = {  plugins: {  'autoprefixer': {browsers: 'last 5 version'}  } }

以上是开发环境的webpack配置,下边是打包生产环境的配置webpack.product.config.js:

const path = require('path');const config = require('./webpack.config');const merge = require('webpack-merge');const UglifyJsPlugin = require("uglifyjs-webpack-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin');const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //压缩单独的css文件const CleanWebpackPlugin = require('clean-webpack-plugin');const ManifestPlugin = require('webpack-manifest-plugin'); //资源清单const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); //监控打包文件所花费的时间,方便具体的性能优化const smp = new SpeedMeasurePlugin();const PurifyCSSPlugin = require("purifycss-webpack"); //css tree-shaking 依赖插件glob-all和purify-cssconst glob = require("glob-all");module.exports = smp.wrap(merge(config, { mode: 'production', stats: config.devServer.stats, devtool: false, //当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题 externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'moment': 'moment', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'ant-design-vue': 'antd', //使用externals html里需手动引入一下js,特别注意:还需额外引入moment.js,并放在antd之前,否则会报错 'lodash': '_', }, optimization: { minimizer: [  new UglifyJsPlugin({  parallel: true, //使用多线程并行运行来提高构建速度,默认并发运行数量:os.cpus().length - 1  uglifyOptions: {   compress: {   inline: false,   drop_console: true, //是否屏蔽掉控制台输出   },  }  }),  new OptimizeCSSAssetsPlugin() //压缩css ] }, plugins: [ new ManifestPlugin(), new CleanWebpackPlugin(), new PurifyCSSPlugin({  paths: glob.sync([  // 要做CSS Tree Shaking的路径文件  path.resolve(__dirname, "../src/*.vue")  ]) }), new HtmlWebpackPlugin({  template: './src/index.prod.html', //打包时需要的文件路径和名称  filename: 'index.html',    //打包输出后的文件名称  minify: { //压缩html  removeComments: true, //删除注释  collapseWhitespace: true //删除空格  } }), ],}));

打包的配置中有几点需要注意:

1、配置中有一个speed-measure-webpack-plugin的插件,可以监控打包文件所花费的时间,方便具体的性能优化;

2、配置中加入了webpack-manifest-plugin生成资源清单的插件,这个插件所生成的资源清单对服务端渲染SSR非常有用,服务端可以根据当前的manifest,引入css和js文件;

3、配置中引入了purifycss-webpack和glob-all两个插件并依赖一个purify-css插件用来对css的tree-shaking。shake有摇动、抖动之意,言外之意就是通过抖动将项目中没有使用却定义了的js方法给删除,降低打包后项目的体积,很形象哈。自webpack2开始,webpack就自带了js的tree-shaking,却没有css的tree-shaking,所以我们就借助了插件来实现tree-shaking。

4、为了提高打包的速度以及降低打包后的项目体积,我们可以将项目中用到框架采用CDN的方式引入,从而将这部分框架排除在打包之外,而new HtmlWebpackPlugin配置项中的template的路径引用的index.prod.html文件就是采用CDN的方式引入的第三方的框架,区分了开发环境中的index.html。提升构建速度也可以通过DllPlugin和DLLReferencePlugin插件来实现,具体配置可参考:/article/162789.htm

vue的项目目录:

react项目的webpack配置跟vue项目的webpack配置大同小异,这里不再多说,最后奉上package.json:

{ "name": "webpackvue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "cross-env BABEL_ENV=development webpack-dev-server --config config/webpack.config.js", "build": "cross-env NODE_ENV=production webpack --config config/webpack.product.config.js" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.4.4", "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.4.4", "@babel/preset-env": "^7.4.4", "@babel/runtime": "^7.4.4", "autoprefixer": "^9.5.1", "babel-loader": "^8.0.6", "babel-plugin-import": "^1.11.2", "clean-webpack-plugin": "^2.0.2", "cross-env": "^5.2.0", "css-loader": "^2.1.1", "file-loader": "^3.0.1", "glob-all": "^3.1.0", "html-webpack-plugin": "^3.2.0", "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.6.0", "node-sass": "^4.12.0", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", "progress-bar-webpack-plugin": "^1.12.1", "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0", "sass-loader": "^7.1.0", "speed-measure-webpack-plugin": "^1.3.1", "style-loader": "^0.23.1", "uglifyjs-webpack-plugin": "^2.1.3", "url-loader": "^1.1.2", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.10", "webpack": "^4.31.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1", "webpack-manifest-plugin": "^2.0.4", "webpack-merge": "^4.2.1" }, "dependencies": { "ant-design-vue": "^1.3.9", "element-ui": "^2.8.2", "moment": "^2.24.0", "vue": "^2.6.10", "vue-router": "^3.0.6", "vuex": "^3.1.1" }}

总结

以上所述是小编给大家介绍的使用webpack搭建vue项目及注意事项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • webpack4+Vue搭建自己的Vue-cli项目过程分享
  • vue-cli webpack模板项目搭建及打包时路径问题的解决方法
  • webpack搭建vue 项目的步骤
  • Vue-cli-webpack搭建斗鱼直播步骤详解
  • vue+node+webpack环境搭建教程
  • 详解使用vue脚手架工具搭建vue-webpack项目
  • windows下vue-cli及webpack搭建安装环境
  • 详解用vue-cli来搭建vue项目和webpack


  • 上一条:
    前端路由&webpack基础配置详解
    下一条:
    vuex 中插件的编写案例解析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客