webpack+vue学习一：配置webpack（分离开发和生产环境），并实现vue页面输出

时间 2020-05-12

标签 webpack+vue webpack vue 学习配置分离开发生产环境实现页面输出繁體版

原文原文链接

前言

webpack的应用很普遍，就算不深刻使用，仍是须要了解一番的。
本文并无详细描述每一步的安装组件步骤和一些概念等，由于webpack官网已经写得很详细了，网上学习webpack的文档也有不少，可是我在学习的过程当中，没有找到vue和webpack结合来说的文档，而且学习配置中也遇到了不少问题，所以，本文旨在记录完整的配置，以及遇到的一些bugcss

学习资料

webpack 官网：www.webpackjs.com/
vue 官网： cn.vuejs.org/html

安装webpack，并初始化

一、安装webpack步骤以下（已经有安装node.js）：

npm install --save-dev webpack // 安装最新的webpack
npm install --save-dev webpack-cli // 安装webpack-cli
npm init // 初始化项目
复制代码

初始化项目的时候，根据提问本身选择相应的选项，在初始化结束以后，项目里会有 package.json 文件 vue

这个文件记录了项目的配置信息。

二、新建文件 webpack.common.js 、webpack.dev.js、webpack.prod.js（名称可改）

默认的webpack配置文件名称为 webpack.config.js ,但通常都会进行环境分离，因此删除 webpack.config.js,新建如下三个文件，分别为公用环境、开发环境、生产环境 node

三、package.json修改

在package.json中添加指定的运行指令，并使用set NODE_ENV= 为当前环境设置别名，须要注意的是，set NODE_ENV=XXName 的 XXName先后不能有空格，否则空格会包含到当前环境名称中webpack

"scripts": {
    "build": "set NODE_ENV=production&& webpack --config webpack.prod.js", // 设置生产环境运行指令为 npm build,生产环境名称为production,生产环境配置文件为webpack.prod.js（下同）
    "start": "set NODE_ENV=development&& webpack-dev-server --open --config webpack.dev.js"
},
复制代码

四、其余文件

index.html ，浏览器运行须要的页面
src 文件夹，存放相关代码
src/main.js 项目的入口文件
src/assets 相关的图片等资源存放
src/common js方法
src/page 相关代码页
App.vue vue页面主页
static 项目静态资源文件夹页面的布局能够参考vue-Cli，也能够根据本身的习惯配置

项目目录

（划掉的文件能够先不用去配置）

完整配置

一、webpack.common.js中配置以下

const path = require('path'); // 定义当前路径
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 添加vue-loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取独立的css文件
module.exports = {
  entry: {
    app: './src/main.js', // 入口文件
  },
  // 路径别名--在vue文件中，能够直接使用@或static缩写路径
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      static: path.resolve(__dirname, 'static')
    }
  },
  // 引入插件
  plugins: [
    new VueLoaderPlugin(), // 引入vue-loader
    new MiniCssExtractPlugin({
      filename: 'static/style/style.css'
    }),
  ],
  // bundle输出，这里也能够分开写在开发环境和生产环境中
  output: {
    filename: process.env.NODE_ENV === 'production' ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].[hash].js', // chunkhash不可与热更新一块儿使用，开发环境使用了热更新，因此须要区分开发和生产环境
    chunkFilename: '[name].bundle.js', // 决定非入口 chunk 的名称
    path: path.resolve(__dirname, 'dist'),
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/' 
  },
  // 规则配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ],
        // 排除node_modules内的转译
        exclude: file => (
          /node_modules/.test(file) && !/\.vue\.js/.test(file)
        )
      },
      {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            {
                loader: 'file-loader',
                options: {
                    limit: 10240,
                    name:"static/imgs/[name].[ext]", // 输出的文件名
                    esModule: false
                }
            }
          ],
      },
      {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
                loader: 'file-loader',
                options: {
                  limit: 10240,
                  name:"static/fonts/[name].[ext]",
                  esModule: false
              }
            }
          ]
      },
      // 提取css
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
          test: /\.less$/,
          use: [
            process.env.NODE_ENV !== 'production'
              ? 'vue-style-loader'
              : MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
          ]
      },
    ]
  },
};
复制代码

二、webpack.dev.js中配置以下

// 合并配置文件
const merge = require('webpack-merge')
const common = require('./webpack.common.js')

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(common, {
  devtool: 'inline-source-map', // 输出报错
  // 热更新
  devServer: {
    hot: true,
    contentBase: './src/main.js',
    host: 'localhost'
  },
  plugins: [
    //浏览器预览页面
    new HtmlWebpackPlugin({
      title: 'development',
      filename: 'index.html',
      template: 'index.html'
    }),
    new webpack.NamedModulesPlugin(), // 查看要修补(patch)的依赖-查看更改的文件
    new webpack.HotModuleReplacementPlugin()
  ],
})
复制代码

三、webpack.prod.js中配置以下

// 生产环境
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin'); // 压缩js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成浏览器预览页面
module.exports = merge(common, {
    devtool: 'source-map', // 生产环境的报错信息
    mode: 'production', // 压缩输出
    plugins: [
        // 清空dist文件里的内容
        new CleanWebpackPlugin(),
        // 提供生成的index.html模板
        new HtmlWebpackPlugin({
            title: 'productionPage',
            template: 'index.html',
        }),
    ],
    optimization: {
        // 压缩js
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            })
        ],
        // 分离压缩代码-此分离了vue的源码，项目代码单独生成一个js文件
        splitChunks: {
            cacheGroups: {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: 'static/js/vendors',
                chunks: 'initial'
              }
            }
        }
    },
});
复制代码

其余页面配置

.babelrc es6代码解析文件

{
    "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }]
    ],
    "plugins":[]
}
复制代码

main.js 入口文件

import Vue from 'vue'
import App from './App.vue'

export const vue = new Vue({
  render: (h) => h(App)
}).$mount('#app')
复制代码

App.vue 至此配置完后,就能够按照正常的vue页面写法写vue项目了

<template>
    <div id="app" class="container">
        <img src="./assets/img/page.png">
        <img :src="imgs" alt="">
        <img :src="imgs2" alt="">
        <p class="p-test">{{ greeting }} world!ddd!!</p>
        <home></home>
    </div>
</template>
<script>
import imgs from '@/assets/img/page.png'
import imgs2 from 'static/img/finger.png'
import home from '@/pages/home'
export default {
    name: 'App',
    components: { home },
    props: {},
    data() {
        return {
            imgs: imgs,
            imgs2: imgs2,
            greeting: "Hello",
        };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {},
    methods: {},
}
</script>
<style lang="less">
@import 'static/style/common.less';
.container{ 
    .p-test{
        color: red
    }
}
</style>

复制代码

以上配置须要安装的插件以下：

npm install --save lodash // 用于打包 lodash 依赖
npm install --save-dev style-loader css-loader // 加载CSS
npm install --save-dev file-loader // 加载图片、字体等
npm install --save-dev html-webpack-plugin // 每次打包生成一个HTML文件，将全部的 bundle 自动添加到 html 中
npm install clean-webpack-plugin --save-dev // 清理dist文件夹
npm install --save-dev webpack-dev-server // 代码发生变化后自动编译代码
npm install --save webpack-merge // 分离代码，区分生产环境和开发环境
npm install --save uglifyjs-webpack-plugin // 压缩打包代码 ---  没法识别es6语法
npm install --save terser-webpack-plugin // 压缩打包代码 --- 替换uglifyjs
npm install --save-dev @babel/plugin-syntax-dynamic-import // 分离代码所用到的
npm install -D mini-css-extract-plugin // css提取

// 安装vue
npm install vue
npm install -D vue-loader vue-template-compiler // 安装vue-loader和vue-template-compiler
npm install -D sass-loader node-sass //编译<style>标签
npm install -D less less-loader //编译<style>标签(选择须要的)

// es6预处理器
npm install es6-promise // 处理es6
npm install -D babel-core
npm install babel-loader@7.1.5 // 须要和babel-core版本匹配
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
复制代码

问题解决

一、babel-loader版本不匹配报错

解决方法之一：版本不匹配，babel-loader 8 须要的是 // 7 的版本

npm install babel-loader@7.1.5
复制代码

二、.babelrc文件为空报错

解决方法：.babelrc文件不能为空，删除或进行配置

三、.babelrc内部设置报错

解决方法：

npm install babel-preset-env --save-dev //.babelrc设置了env选项，选装相应的插件
复制代码

四、由于css-loader和style-loader顺序问题报错

解决方法：先写style-loader再写css-loader（webpack从后往前解析，须要先找到css文件，再去识别添加style标签）

五、chunkhash不可与热更新一块儿使用

解决方法（之一）：分离开发环境和生产环境，并根据环境进行判断

总结

至此，项目可使用 npm run build进行打包项目，npm start运行项目了。vue的路由配置还在学习中，等待更新下一篇学习二的文档。共勉es6