webpack4.0构建vue环境

从0开始配置Vue项目环境

需要的包

cnpm install webpack webpack-cli html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin webpack-dev-server clean-webpack-plugin webpack-merge @babel/core @babel/polyfill @babel/preset-env autoprefixer babel-loader css-loader file-loader postcss-loader sass-loader url-loader vue vue-loader vuex axios vue-template-compiler -D

配置流程

• 新建一个build目录

• 在build文件夹下放置配置文件

• 各自配置如下

• webpack.common.js

• const HtmlWebpackPlugin = require('html-webpack-plugin'),
      {CleanWebpackPlugin} = require('clean-webpack-plugin'),
      path = require('path'),
      VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  module.exports = {
  
      entry: {
          filename: './src/main.js'
      },
  
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: [
                      {
                          loader: 'babel-loader',
                      }
                  ]
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      {
                          loader: 'url-loader',
                          options: {
                              name: '[name]_[hash].[ext]',
                              outputPath: 'image/',
                              limit: 10240
                          }
                      }
                  ]
              },
              {
                  test: /\.(eot|ttf|svg)$/, //打包字体
                  use: {
                      loader: 'file-loader',
                  }
              },
          ]
      },
  
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html'
          }),
  
          new CleanWebpackPlugin(),
  
          new VueLoaderPlugin()
      ],
  
      output: {
          path: path.resolve(__dirname, '../dist'),
          filename: '[name].[contenthash].js',
          chunkFilename: '[name].[contenthash].js'
      }
  };

   

• webpack.dev.js

• const HtmlWebpackPlugin = require('html-webpack-plugin'),
      {CleanWebpackPlugin} = require('clean-webpack-plugin'),
      path = require('path'),
      VueLoaderPlugin = require('vue-loader/lib/plugin');
  
  
  module.exports = {
  
      entry: {
          filename: './src/main.js'
      },
  
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: [
                      {
                          loader: 'babel-loader',
                      }
                  ]
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      {
                          loader: 'url-loader',
                          options: {
                              name: '[name]_[hash].[ext]',
                              outputPath: 'image/',
                              limit: 10240
                          }
                      }
                  ]
              },
              {
                  test: /\.(eot|ttf|svg)$/, //打包字体
                  use: {
                      loader: 'file-loader',
                  }
              },
          ]
      },
  
      plugins: [
          new HtmlWebpackPlugin({
              template: './src/index.html'
          }),
  
          new CleanWebpackPlugin(),
  
          new VueLoaderPlugin()
      ],
  
      output: {
          path: path.resolve(__dirname, '../dist'),
          filename: '[name].[contenthash].js',
          chunkFilename: '[name].[contenthash].js'
      }
  };

   

• webpack.prod.js

• const commonConfig = require('./webpck.common'),
      merge = require('webpack-merge'),
      webpack = require('webpack'),
      MiniCssExtractPlugin = require('mini-css-extract-plugin'),
      OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
      path = require('path'),
  
      cssConfig = [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
      ],
  
      scssConfig = [
          MiniCssExtractPlugin.loader,
          {
              loader: 'css-loader',
              options: {
                  importLoaders: 2,
              }
          },
          'sass-loader',
          'postcss-loader'
      ],
  
      prodConfig = {
          mode: 'production',
          devtool: 'cheap-module-eval-source-map',
          output: {
              path: path.resolve(__dirname, '../dist'),
              filename: '[name].[contentpath].js',
              chunkFilename: '[name].[contentpath].js',
          },
  
          module: {
              rules: [
                  {
                      test: /\.vue$/, //打包字体
                      use: {
                          loader: 'vue-loader',
                          options: {
                              loaders: {
                                  css: cssConfig,
                                  scss: scssConfig,
                              }
                          }
                      }
                  },
                  {
                      test: /\.css/,
                      use: cssConfig
                  },
                  {
                      test: /\.scss/,
                      use: scssConfig
                  }
              ]
          },
  
          optimization: {
              minimizer: [new OptimizeCssAssetsWebpackPlugin({})],
              runtimeChunk: {
                  name: 'manifest'
              },
              splitChunks: {
                  chunks: 'all', //配置了all就是相当于配置了下面的默认配置
                  cacheGroups: {
                      vendors: {
                          test: /[\\/]node_modules[\\/]/,
                          priority: -10,
                          filename: 'vendors.js',
                      },
                      // default: false
                  }
                  // minSize: 30000,
                  // maxSize: 0,
                  // minChunks: 1,
                  // maxAsyncRequests: 5,
                  // maxInitialRequests: 3,
                  // automaticNameDelimiter: '~',
                  // name: true,
              },
  
          },
  
          plugins: [
              new MiniCssExtractPlugin({
                  filename: '[name].css',
                  chunkFilename: '[id].chunk.css'
              }),
          ]
  
      };
  
  module.exports = merge(prodConfig, commonConfig);

   

• 配置tree sharing的忽略项

1. 在packge.json中配置 sideEffects

   "sideEffects": ["*.(c|sc)ss","*.vue"]

• 新建一个在src目录下的 .babelrc 文件
• 在.babelrc下配置 babel 的配置

• {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ]
    ]
  }

   

• 在src目录下新建 一个 postcss.config.js 文件
• 在postcss.config.js中配置自动添加厂商前缀

• module.exports = {
      plugins: [
          require('autoprefixer')
      ]
  };

   

大功告成！

标签：vue,name,require,loader,webpack,构建,webpack4.0,path,js
来源： https://www.cnblogs.com/guiyuan123/p/11001928.html