从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文件夹下放置配置文件
-
各自配置如下
-
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的忽略项
-
在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') ] };
大功告成！