开发环境(development)生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。

遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。为了减少重复的代码,将配置中可复用的部分抽离出来。

1.安装 webpack-merge

npm install --save-dev webpack-merge

2.更改目录结构

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const 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:/\.css/,
use:[
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'output management'
})
]
}

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common');
const webpack = require('webpack'); module.exports = merge(common, {
mode: 'development',
devtool: "inline-source-map",
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
]
})

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common'); module.exports = merge(common,{
mode: 'production'
})

对于开发环境的压缩,在控制台使用

  • --optimize-minimize 标记将在后台引用 UglifyJSPlugin
  • --define process.env.NODE_ENV="'production'" 将在后台调用与 DefinePlugin 实例。
  • webpack -p 将自动地调用所需要引入的插件。

webpack配置篇的更多相关文章

  1. vue爬坑之路(webpack 配置篇)

    在vue cli下 1.npm run dev 打开浏览器在config的index.js中修改autoOpenBrowser为true 关闭sourcemap productionSourceMap ...

  2. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  3. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  4. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  5. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  6. 上手 Webpack ? 这篇就够了!

    JavaSript 模块化打包已混迹江湖许久.2009年,RequireJS 就提交了它的第一个版本,Browserify 接踵而至,随后其他打包工具也开始大行其道.最终,Webpack 从其中脱颖而 ...

  7. webpack配置指南

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  8. 翻译 | 上手 Webpack ? 这篇就够了!

    译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://www.smashingmagazine.com/2017/02/a-detailed-intro ...

  9. 通用、封装、简化 webpack 配置

    通用.封装.简化 webpack 配置 现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态.但在创建一个项目的时候,总是免不了要配置 webpac ...

随机推荐

  1. QString 转换成 wchar 的一个小陷阱

    QString::toWCharArray(wchar_t * array) 其中 wchar_t * array 除了要分配内存之外,必须用 wmemset 初始化. 环境是 Visual Stud ...

  2. ElasticSearch 镜像 & 安装 & 简易集群

    目录 ES镜像 JDK镜像 安装 1. 安装JDK 2. 解压安装ES 3. 配置 4. 新建用户 5. 启动 踩坑 1. root启用报错 2. max file descriptors [4096 ...

  3. Linux利用sed批量修改文件名

    初始文件名 # ls -lh total 5.5G -rw-r--r-- 1 root root 193K Sep 28 09:38 20180908.txt drwxr-xr-x 2 root ro ...

  4. AMD 开源照片级渲染引擎 Radeon ProRender

    除了Radeon Pro WX.Radeon Pro Solid State两款全新的专业显卡,AMD今天还宣布,Radeon ProRender渲染引擎即将开放源代码,开发人员可任意使用.AMD去年 ...

  5. Get史上最优雅的加密方式!没有之一!

    你的配置文件是不是还在使用下面这种落后的配置暴露一些密码: jdbc.url=jdbc:mysql://127.0.0.1:3305/afei jdbc.username=afei 如果是,那么继续往 ...

  6. Shiro踩坑记(一):关于shiro-spring-boot-web-starter自动注解无法注入authorizer的问题

    一)问题描述: 我在一个Spring的项目中使用shiro搭建权限控制框架.主要通过shiro-spring-boot-web-starter包快速集成Shiro.但是项目无法启动,报没有author ...

  7. Java泛型和编译优化的一个例子

    public class Main { public static void main(String[] args) { ArrayList<String> strList = new A ...

  8. SQL Server遍历表中记录的2种方法

    SQL Server遍历表一般都要用到游标,SQL Server中可以很容易的用游标实现循环,实现SQL Server遍历表中记录.本文将介绍利用使用表变量和游标实现数据库中表的遍历. 表变量来实现表 ...

  9. axis2 411

    返回411加个这个就行了 _operationClient.getOptions().setProperty(HTTPConstants.CHUNKED, false); 本文转自 cd1989929 ...

  10. Android多线程下载远程图片

    修改后的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...