我的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.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来执行对应的操作。

个人的一点分析

这个配置不错 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

我的webpack路相关推荐

webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)--图片的路径与打包刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我 ...
vue进阶之路 webpack打包持续更新
MVVM设计思想 M(model) V(view) VM(View-Model) Vue生命周期挂载(初始化相关属性) beforeCreate->在实力初始化之后,数据观测和配置之前被调用 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
webpack 打包编译优化之路
一.摘要从最初的html css js 混合编程,到分离编程.再到用上各种框架 react vue angular , 伴随着框架和模块化的概念铺开,打包编译工具渐渐浮出水面.从2013年开始使用打 ...
Webpack 4x 之路（五）
在上一篇中我们在html文件中也引用了一张图片,打包完毕后在浏览器控制台报错: GET file:///D:/myweb/webpack/webpack_study_demo/webpack_new_ ...
html公共模块提取出去,webpack 填坑之路--提取独立文件(模块)
前言最近重新看了一遍 webpack 提取公共文件的配置.原来觉得这东西是个玄学,都是 "凭感觉" 配置.这篇文章将以解决实际开发遇到的问题为核心,悉数利用 webpack 提取 ...
webpack学习之路（四）webpack-hot-middleware实现热更新
上一节我学习了webpack-dev-middleware,但是单独使用它并没有实现热更新,所以这节我要学习搭配使用webpack-hot-middleware,来实现热更新功能. 创建项目我们依然 ...

我的webpack路

我的webpack路相关推荐

最新文章

热门文章