webpack4.0构建vue环境

r囧r小猫 2021-12-13 17:57 340阅读 0赞

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

大功告成！

转载于:https://www.cnblogs.com/guiyuan123/p/11001928.html