Webpack，我的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，可以考慮用webpack-merge將配置文件拆分為3個文件，一個是webpack.common.js，即不管是生產環境還是開發環境都會用到的部分，以及webpack.product.js和webpack.dev.js, 并且使用webpack-merge來合并對象。

common.js

 //webpack.common.jsvar 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來執行對應的操作。

webpack require？個人的一點分析

這個配置不錯 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