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') ] };

   

大功告成！