如何用webpack搭建vue项目？本文案例详解

前言：都2020年了，感觉是时候该学一波webpack了，趁着最近有时间，就学了一下，等把官网上的webpack结构和模块大概看了一遍之后，就感觉可以开始搭个项目实战一下了，从0开始，一步步记录下来

使用版本： webpack4.x

1.包含插件和loader

* html: html-webpack-plugin clean-webpack-plugin * css: style-loader css-loader sass-loader node-sass postcss-loader autoprefixer * js: babel-loader @babel/preset-env @babel/core @babel/polyfill core-js@2 @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs2 * vue: vue-loader vue-template-compiler vue-style-loader vue vue-router axios vuex * webpack: file-loader url-loader webpack-dev-server webpack-merge copy-webpack-plugin happypack HardSourceWebpackPlugin webpack-bundle-analyzer optimize-css-assets-webpack-plugin portfinder FriendlyErrorsPlugin

另外要注意：光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦

2.webpack功能

-- 生成hmtl模板 -- 删除上一次的dist文件 -- 自动添加浏览器前缀 -- 使用sass预编译器 -- 转换ES6,7,8,9语法为ES5 -- 大于10k文件打包到dist，小于10k转换为base64 -- 兼容vue-- 拷贝静态文件 -- 热更新 -- 区分当前环境 -- 多线程打包 -- 缓存未改变模块 -- g-zip压缩 -- 获取本机ip -- 打包大小分析 -- 压缩css

-- 检查端口是否存在复制代码

3.实现步骤

1. 初体验

1. 新建一个文件取名为webpack-vue 2. cd webpack-vue npm init -y npm i -D webpack webpack-cli 3. 新建 src/main.js ,里面随便写点 console.log('hello,webpack') 4. 修改 package.json - >scripts ,添加 "build":"webpack src/main.js"

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码

2. 配置

新建一个 build 文件夹,新建一个 webpack.config.js

写入以下内容

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码

3. 我们生成了main.js之后,不可能每次都手动在index.html里面引入，所以我们需要这个插件来帮我们自动引入

先安装插件:

npm i -D html-webpack-plugin复制代码

根目录新建一个 public/index.html

修改webpack.config.js：

const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin')   //这里引入插件
  module.exports = {
      mode:'development', // 开发模式
      entry: path.resolve(__dirname,'../src/main.js'),    // 入口文件
      output: {
        filename: '[name].[hash].js',      // 打包后的文件名称
        path: path.resolve(__dirname,'../dist')  // 打包后的目录
      },
      //插件注入
      plugins:[
        new HtmlWebpackPlugin({
          template:path.resolve(__dirname,'../public/index.html')
        })
      ]  }复制代码

然后npm run build 就会发现dist里面多了index.html，并且已经自动帮我们引入了main.js

4. 由于hash每次生成的不同，导致每次打包都会将新的main.js打包到dist文件夹，所以我们需要一个插件来打包前删除dist文件

先安装插件:

npm i -D clean-webpack-plugin复制代码

webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin')   //引入
 plugins:[
    new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html')
    }),
    new CleanWebpackPlugin()
 ]复制代码

5.我们一般把不需要打包的静态文件放在public里面,这个地方不会被打包到dist，所以我们需要使用插件来把这些文件复制过去

先安装插件:

npm i -D  copy-webpack-plugin复制代码

webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin')      // 复制文件
plugins: [
   new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public'),
          to: path.resolve(__dirname, '../dist')
        }
      ]
    })]复制代码

6. 为了让webpack识别css,我们需要安装loader，并将解析后的css插入到index.html里面的style

先安装:

-- 检查端口是否存在复制代码0

-- 检查端口是否存在复制代码1

7.我们这里可以使用预编译器更好的处理css，我这里使用的是sass

先安装:

npm install -D sass-loader node-sass

-- 检查端口是否存在复制代码2

8. 自动添加浏览器前缀

先安装：

npm i -D postcss-loader autoprefixer

-- 检查端口是否存在复制代码3

9.之前的style-loader只是把css打包到index.html里面的style-loader里面,如果css特别多这种办法肯定不行，所以我们需要单独抽离提取css

先安装:

npm i -D mini-css-extract-plugin

-- 检查端口是否存在复制代码4

10. 我们为了减少图片字体等打包的大小，我们可以使用url-loader将少于指定大小的文件转换为base64,使用file-loader将大于指定大小的文件移动到指定的位置

先安装:

npm i -D file-loader url-loader

-- 检查端口是否存在复制代码5

11.为了兼容浏览器，我们需要将ES6,7,8,9转换为Es5

先安装：

-- 检查端口是否存在复制代码6

-- 检查端口是否存在复制代码7

12.兼容vue

先安装：

-- 检查端口是否存在复制代码8

-- 检查端口是否存在复制代码9

13.热更新

先安装：

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码0

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码1

14.区分开发环境和生产环境

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码2

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码3

我们这里需要安装 webpack-merge 来合并配置项

先安装：

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码4

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码5

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码6

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码7

3.webpack配置优化

1.设置mode

默认为production，webpack4.x默认会压缩代码和去除无用的代码

可选参数：production, development

ps：之前我认为只需要设置mode为production,就不用使用压缩css和js的插件，但结果发现我错了，仔细比较了下，还是要安装的

先安装打包css的：

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码8

5. 然后 npm run build 如果多了一个dist文件,那么初次打包就成功了复制代码9

压缩js和js打包多线程的暂时没有添加，在网上搜有的说不用添加，有的说还是要安装插件，等实际项目中我用完之后再来添加

2.缩小搜索范围

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码0

3.单线程转多线程

webpack处理文本，图片,css的时候，由于js单线程的特性，只能一个一个文件的处理,HappyPack可以将这个任务分解到多个子线程里面，子线程完毕后会把结果发送到主线程，从而加快打包速度

先安装:

npm i -D happypack

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码1

4.第三方模块优化

将不怎么改变的第三方依赖，我们可以用DllPlugin DllReferencePlugin将它从依赖中抽离出来，这样每一次打包就不用打包这些文件，加快了打包的速度;

但是webpack4.x的性能已经很好了，参考vue-cli也没有使用dll抽离，所以我们这里也不使用了，这里我们使用另一个插件：hard-source-webpack-plugin ，这个插件会去对比修改了哪些配置，只去打包修改过了的配置第一次打包速度正常，第二次打包速度能提升 50%+

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码2

5.externals

通过cdn加载的依赖，可以在这里设置，就不会通过webpack编译

6.g-zip压缩

g-zip压缩可以将已经压缩过的js，css再次压缩一遍，减少了打包大小，需要nginx配置

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码3

7.自动获取本地Ip，通过本地ip地址启动项目

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码4

8.抽离一些公共配置

根目录新建vue.config.js 里面配置一些公共的配置如：

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码5

9.打包大小分析

先安装:

npm i -D webpack-bundle-analyzer

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码6

10.完整的vue项目（vue-router axios vuex等）

先安装:

npm i -S vue-router axios vuex

然后在src里面新建 -> router文件夹 ->新建index.js

const path=require('path')
module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'../src/main.js'),  //入口文件
    output:{
        filename:'[name].[hash:8].js',   //打包后的名字  生成8位数的hash
        path.resolve(__dirname,'../dist')   //打包的路径
     }
 }
 然后修改 package.json ->scripts,修改为： "build":"webpack --config build/webpack.config.js"   然后npm run build复制代码7

到这里webpack搭建vue项目就搭建完成，还有没懂的吗？光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！

本文的文字及图片来源于网络加上自己的想法,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理

宙飒zhousa.om