从零搭建Webpack4.41+Vue2.5+iview3.5工程

其他 2021-03-04 10:12:10 阅读次数: 0

转载地址：https://www.cooooder.com/archives/20201208

当前公司前端框架使用的是webpack2.x + vue2.x，因为最近引用一个第三方插件需要一些高版本插件支撑，在各种插件版本配置调试过程中逐渐趋向崩溃，所以决定从零、从基础开始使用webpack4.41+vue2.5自底向上搭建一个工程框架，正好顺便加深一下webpack相关参数理解。
剔除了公司特有的一些插件，该教程中主要引入和配置的插件如下：

  • webpack 4.41.2
  • iview 3.5.1
  • babel 7.8.4
  • vue 2.5.11
  • vue-loader 15.9.0
  • vue其它全家桶
  • sass/less/css等常用插件
  • mini-css/optimize-css/uglifyjs等压缩插件

0. 环境

Node 8.15.1

1. 安装脚手架vue-cli2

默认安装的版本就是2.x

npm install -g vue-cli

2. 检查是否安装成功

安装成功打印版本号，注意V大写

vue -V

install node

3. 初始化vue2.x工程

vue init <template-name> <project-name>

vue-cli官方提供以下5种模板：

  • webpack：全面的webpack+vue-loader的模板，包括热加载、css扩展等功能。
  • webpack-simple：简单webpack+vue-loader的模板，不包含其它功能。
  • browserify：全面的Browserify+vueify的模板，包含热加载、单元检测等功能。
  • browserify-simple：简单Browserify+vueify的模板，不包含其它功能。
  • simple：最简单的单页应用模板，只有一个html文件。

我们使用 webpack-simple 模板创建一个较为简单的工程，因为安装的webpack默认3.x版本，后面还需要切换至4.x，所以没有必要使用 webpack 模板工程。

在初始化过程中需要输入 工程名称（英文小写）、工程描述、作者、授权、是否使用sass ，按要求输入或一直回车都可以。

vue-cli

vue project structure

列出3个默认生成的配置文件，后面切换需要修改

  • package.json
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
  • .babelrc
{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}
  • webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

4. webpack3.x切换为webpack4.x

4.1 主要步骤

  1. 确定待引入的 vue、webpack、babel、sass、less、css、js、iview 等插件的版本号
  2. 调整工程目录
  3. 新增和修改配置文件
  4. 重新安装插件
  5. 项目运行

4.2 版本目录

  • vue
    "vue": "^2.5.11",
    "vue-router": "^2.8.1",
    "vuex": "^2.5.0",
    "vue-loader": "^15.9.0",--打包编译vue文件
    "vue-template-compiler": "^2.6.11",--打包识别<template>
  • webpack
    "webpack": "^4.41.2",--主要
    "webpack-cli": "^3.3.11",--主要脚手架
    "webpack-dev-server": "^3.8.2",--开发环境本地启动的插件
    "webpack-merge": "^4.2.2",--webpack合并对象
    "clean-webpack-plugin": "^3.0.0",--清除文件夹目录
    "copy-webpack-plugin": "^5.0.4",--拷贝文件
    "html-webpack-plugin": "^3.2.0",--配置HTML模板

    "@babel/core": "^7.8.4",--处理新语法，比如 模板字符串，let，const，扩展运算符 等
    "@babel/preset-env": "^7.8.4",
    "@babel/runtime": "^7.8.4",--【注意放在运行环境】
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/runtime-corejs3": "^7.8.7",--注意放在运行环境
    "core-js": "^3.6.4",--【注意放在运行环境】处理新 API，比如 Promise，Set，Map，Object.assign 等
    "regenerator-runtime": "^0.13.3",--【注意放在运行环境】处理 async，await，generator 等
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",--webpack支持import().then()，例如router.js配置const test= () => import('./test.vue')
    "babel-loader": "^8.0.6"
  • iview
    "iview": "^3.5.1",
  • axios
    "axios": "^0.19.0",
  • css/less/sass
    "css-loader": "^3.2.0",
    "less": "^2.7.1",
    "less-loader": "^4.0.5",
    "node-sass": "^4.11.0",--sass基于node-sass
    "sass-loader": "^7.1.0",
    "mini-css-extract-plugin":"^0.9.0"--拆分css,配合html-webpack-plugin,不用再使用style-loader
  • css浏览器兼容 (需要额外配置.babelrc)
    "postcss-loader": "^3.0.0",
    "autoprefixer": "^9.7.4"
  • 资源文件
    "url-loader": "^3.0.0",
    "file-loader": "^5.1.0",
    "html-loader": "^0.5.5",
1. url-loader 会把图片资源转为base64打包输出到JS文件中，减少文件的http请求，但会增加加载时间
2. file-loader会把图片资源复制到打包文件夹中
   两者配合使用，在webpack.common.js中配置，可以限制条件在图片小于1M才会把图片转化为base64
  • js/css文件打包压缩
    "optimize-css-assets-webpack-plugin": "^5.0.3",--CSS文件压缩
    "uglifyjs-webpack-plugin": "^1.0.0",--JS文件压缩

4.3 工程目录结构

webpack4 project structure

  • build webpack配置文件,common/dev/prod
  • dist 工程打包输出目录
  • src/router vue路由配置
  • src/template 页面模板
  • src/vendors base常用插件，exten常用第三方插件
  • src/views 业务页面
  • src/App.vue vue根组件
  • index.html 项目入口，npm run dev时进入，npm run build时通过模板template打包
  • main.js 入口文件
  • .babelrc babel配置文件
  • postcss.config.js postcss-loader配置文件,配置autoprefixer

4.4 配置文件

package.json

  "scripts": {
    "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.js",
    "build": "webpack --progress --hide-modules --config build/webpack.prod.js"
  },
  "dependencies": {
    "@babel/runtime": "^7.8.4",
    "@babel/runtime-corejs3": "^7.8.7",
    "@riophae/vue-treeselect": "^0.4.0",
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "iview": "^3.5.1",
    "regenerator-runtime": "^0.13.3",
    "vue": "^2.5.11",
    "vue-router": "^2.8.1",
    "vuex": "^2.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "css-loader": "^3.2.0",
    "file-loader": "^5.1.0",
    "happypack": "^5.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "less": "^2.7.1",
    "less-loader": "^4.0.5",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.13.1",
    "uglifyjs-webpack-plugin": "^1.0.0",
    "url-loader": "^3.0.0",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }

4.4.1 .babelrc

从babel 7.4开始，@babel/ployfill已弃用，使用core-js和regenerator-runtime替代，只需要package.json安装，.babelrc配置基本保持不变。
babel7.4 limit

{
  "presets": 
    [
      ["@babel/preset-env",{
        "targets": {
          "chrome": "70",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ],
  "plugins": [
      "@babel/plugin-syntax-dynamic-import",
      ["@babel/plugin-transform-runtime",{"corejs": 3}]
  ],
  "comments": false
}

webpack核心概念

  • entry webpack // 打包入口
    • filename : [ name ].[ hash ].js // [ name ]和entry里面的name对应
    • path : path.resolve(__dirname, 'dist') // 最终打包生成的目录
    • publicPath : '/项目名/dist/' // 访问静态资源文件的路径
    • chunkFilename : [name].chunk.js //用来打包 require.ensure 或者 import().then()加载的模块，例如require('./test')
  • output webpack // 打包后生成的静态资源文件目录，被html引用
  • loader webpack // 只能够处理js文件，所以非js文件需要额外处理；以及二次处理js文件(压缩等）
  • plugins // 插件接口，参与整个webpack构建过程
  • loader //把css/less/scss/vue等非js模块转换成webpack能够处理的js文件，或者对js做二次处理（压缩等）

4.4.2 webpack.common.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const devMode = process.env.NODE_ENV !== 'production';
function resolve(dir) {
    return path.join(__dirname, dir);
}
function getCurrentYear() {
    let myDate = new Date();
    let tYear = myDate.getFullYear();
    return tYear;
}

module.exports = {
    entry: {
        main : '@/main',//入口
        'vender-base': '@/vendors/vendors.base.js',//常用插件
        'vender-exten': '@/vendors/vendors.exten.js'//常用第三方插件
    },
    output: {
        path: path.resolve(__dirname, '../dist/dist'),
    },
    module: {
        rules: [
            {
                test: /\.vue$/, // 处理vue模块
                loader: 'vue-loader',
                options: {
                    loaders: {
                        less: [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader'], 'less-loader'),
                        css:  [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader']),
                        scss: [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader'], 'sass-loader'),
                    }
                }
            },
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            {
                test:/\.scss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {//处理es6语法
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test'),resolve('/node_modules/iview/src'),
                    resolve('/node_modules/iview/packages')]
            },
            {
                test: /iview\/.*?js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.(gif|png|jpe?g|svg|woff|eot|ttf)\??.*$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false,
                            limit: 1024,
                            fallback: 'file-loader'
                        }
                    }
                ]
            },
            {
                test: /\.(html|tpl)$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('©️' + getCurrentYear() + ' 公司名称'),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(), // 热更新插件 
    ],
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.esm.js',
            '@': resolve('../src'),
        }
    }    
}

4.4.3 webpack.dev.js

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, { // 将webpack.common.js合并到当前文件
    mode: "development",
    devtool: 'cheap-module-eval-source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
})

猜你喜欢

转载自blog.csdn.net/zszangy/article/details/104796147
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022