我的webpack路

一直以来都在为项目中webpack，焦头烂额，官网的文档也看过几遍，项目也扒拉扒拉几个看过，收获甚微。
单停止扒拉扒拉却从未停止。
使用webpack-merge区分生成环境和开发环境。将配置拆分简化

很多时候，我们都需要针对不同的环境进行不用的操作。
比如在生成环境下分离css到单独文件：

var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

在生成环境下要压缩代码：

new UglifyJSPlugin()；

在开发环境下使用代理

devServer:{
   proxy: {
      'api': {
          target: 'http://api.douban.com/v2/movie/',
          secure: false,
          changeOrigin: true
      }
  }

通常会用process.env.NODE_ENV === “development”，并且在package.json中设置环境变量来进行判断，不过当文件大了或者页面需要判断的地方多了之后，配置文件就会充斥着大量三元表达式
。

可以考虑用webpack-merge将配置文件拆分为3个文件，一个是webpack.common.js，即不管是生产环境还是开发环境都会用到的部分，以及webpack.product.js和webpack.dev.js, 并且使用webpack-merge来合并对象。

common.js

 //webpack.common.js
 var path = require('path');
 var HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
     entry: {
         app: './src/index.js'
     },
     output: {
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist')
     },
     module: {
        rules:[
            {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader'
                 }
            },
        ]           
     },
    plugins: [
         new HtmlWebpackPlugin({
             title: 'test'
         })
     ],
 }

dev.js

//开发环境webpack.dev.js
var merge = require('webpack-merge');
var common = require('./webpack.common.js');

module.exports = merge(common, {
  module:{
     rules:[
       {
           test: /\.css$/,
           use:["style-loader","css-loader"]
       }
   ]      
 },
  devtool: 'inline-source-map',
  devServer:{
       open:true,  
       hot: true, 
       proxy: {
          '/api/': {
              target: 'http://baidu.com',
              secure: false,
              changeOrigin: true
          }
      }      
    },
})

product.js

//生产环境webpack.product.js
var merge = require('webpack-merge');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var common = require('./webpack.common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var cleanPlugin = require("clean-webpack-plugin");
var extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
});

module.exports = merge(common, {
    module: {
        rules: [{
            test: /\.css$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, ],
                fallback: "style-loader"
            })
        }]

    },
    devtool: 'source-map',
    plugins: [
        new cleanPlugin(["dist"]),
        new UglifyJSPlugin(),
        extractSass,
    ]
});

在packjson中修改webpack默认配置文件

"scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.product.js"
}

通过npm run dev以及npm run build来执行对应的操作。

个人的一点分析
这里写图片描述

这个配置不错 https://www.cnblogs.com/whkl-m/p/6627864.html

vue cli打包文件优化工具 webpack-bundle-analyzer

vue-cli的webpack模板项目配置文件分析https://blog.csdn.net/hongchh/article/details/55113751

猜你喜欢