文档章节

webpack1和webpack2版本的区别

hezhongjie
 hezhongjie
发布于 2017/05/03 11:46
字数 688
阅读 98
收藏 1
点赞 0
评论 0

webpack1已结不再维护了,官方在主推webpack2,原先使用webpack1的用户,想要使用v2,只需要做几个配置小改动即可。

我们只关注常用的配置选项,不常用的不做解释。

1、resolve配置

以前你可能这么写

resolve: {
    extensions: ['', '.jsx', '.js', '.json'],
    modulesDirectories: ['node_modules', 'src'],
    alias: {
        actions: __dirname + `/src/actions`,
        components: __dirname + `/src/components`,
        containers: __dirname + `/src/containers`,
        reducers: __dirname + `/src/reducers`,
        store: __dirname + `/src/store`
    }
}

现在你该这么写:取消了空字符串

resolve: {
    extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.join(__dirname, './src')
    ]
  }

2、module配置

以前你可能这么写:module: {

loaders: [{
    test: /\.(js|jsx)$/,
    loaders: ['react-hot', 'babel-loader'],
    exclude: /node_modules/
}, {
    test:   /\.(less|css)$/,
    loader: "style-loader!css-loader!less!postcss-loader"
}, {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file?name=[md5:hash:base64:10].[ext]'
}, {
    test: /\.json$/,
    loader: 'json'
}, {
    test: /\.md$/,
    loader: 'file?name=[name].[ext]'
}]

}

现在你该这么写:

a、外层loaders改为rules

b、内层loader改为use

c、所有插件必须加上-loader,不再允许缩写,所以react-hot不需要再配置。

d、不再支持使用!连接插件,请使用数组形式。

e、json-loader已经被移除,不需要手动添加,webpack会帮你处理好这些事情。

module: {
      rules: [{
          test: /\.(js|jsx)$/,
          use: ['babel-loader'],
          exclude: /node_modules/,
          include: path.join(__dirname, 'src')
      }, {
          test: /\.(less|css)$/,
          use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
      }, {
          test: /\.(png|jpg|gif|md)$/,
          use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
      }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      }],
  }
};

3、plugins配置

以前你可能这么写:

new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin()

现在你该这么写:

a、移除了OccurenceOrderPlugin 和 NoErrorsPlugin

b、更多plugins配置请参考 https://webpack.js.org

new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin()

==============================================================

以上几个常用配置变化的比较明显,没有修改的配置会报错导致webpack无法使用,请注意遵守webpack2规则。

最后贴上一份webpack.config.js基础配置,查看该配置完整项目请点击:react-webpack2

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

//判断当前运行环境是开发模式还是生产模式
const nodeEnv = process.env.NODE_ENV || 'development';
const isPro = nodeEnv === 'production';

console.log("当前运行环境:", isPro)

var plugins = []
if (isPro) {
  plugins.push(
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false
          }
      }),
      new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeEnv)
          }
      })
  )
} else {
  plugins.push(
      new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeEnv)
          },
          BASE_URL: JSON.stringify('http://localhost:9009'),
      }),
      // new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin()
      // new webpack.NoErrorsPlugin()
  )
}

module.exports = {
  devtool: false,
  entry: {
    app: [
      'webpack-hot-middleware/client?path=http://localhost:3011/__webpack_hmr&reload=true&noInfo=false&quiet=false',
      'babel-polyfill',
      './src/index'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'build'),
    publicPath: 'http://localhost:3011/build/',
    chunkFilename: '[name].js'
  },
  // BASE_URL是全局的api接口访问地址
  plugins,
  // alias是配置全局的路径入口名称,只要涉及到下面配置的文件路径,可以直接用定义的单个字母表示整个路径
  resolve: {
    extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.join(__dirname, './src')
    ]
  },

  module: {
      rules: [{
          test: /\.(js|jsx)$/,
          use: ['babel-loader'],
          exclude: /node_modules/,
          include: path.join(__dirname, 'src')
      }, {
          test: /\.(less|css)$/,
          use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
      }, {
          test: /\.(png|jpg|gif|md)$/,
          use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
      }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      }],
  }
};

本文转载自:https://segmentfault.com/a/1190000008671104

共有 人打赏支持
hezhongjie
粉丝 2
博文 29
码字总数 41381
作品 0
程序员
升级到Webpack2坑——热加载不自动刷新

问题: 升级 Webpack1 到 Webpack2 之后, 开发模式下热加载不起作用。控制台显示“App hot update...”。但页面不自动刷新。 一直hot update...但不自动刷新 解决办法: 去掉WebpackDevSer...

Evelynzzz ⋅ 01/09 ⋅ 0

webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc ⋅ 2017/06/23 ⋅ 0

SanicCRUD-vue 0.1发布, Python 全栈开发实践

本项目将使用Sanic + Vue2 + Webpack2 配合最简单CRUD的逻辑,从工程组织、编码、测试、前、后端构建、接口交互等来诠释一个基于Python的全新一代高性能全栈开发实践的Demo, 具备的功能(v0...

boylegu ⋅ 2017/06/19 ⋅ 2

quasar-framework学习笔记

官方网站: http://quasar-framework.org/ 一、安装 1、 安装quasar-cli npm install -g quasar-cli 2、 使用quasar starter kits初始化项目 quasar提供了多套开发套件,可以使用quasar list...

陈安一 ⋅ 2017/09/18 ⋅ 0

quasar-framework学习笔记

官方网站: http://quasar-framework.org/ 一、安装 1、 安装quasar-cli npm install -g quasar-cli 2、 使用quasar starter kits初始化项目 quasar提供了多套开发套件,可以使用quasar list...

陈安一 ⋅ 2017/09/18 ⋅ 0

基于 vue+element 的后台集成方案--vue-element-admin

vue-element-admin 本项目的定位是后台集成方案,不适合当基础模板来开发,模板建议使用 vueAdmin-template , 桌面端 electron-vue-admin 注意:该项目目前使用 element-ui@1.4.1 版本,所以...

匿名 ⋅ 2017/08/23 ⋅ 12

vue-cli之webpack3构建全面提速优化

前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中...

宇帅 ⋅ 2017/12/23 ⋅ 0

库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师...

掘金官方 ⋅ 01/08 ⋅ 0

【填坑】vue+webpack 升级后在原有项目上的适配问题

古人云:不作死就不会死 本人的项目是 vue + webpack,vue单文件中使用了 Jade 模板与 less 预编译器 起因是因为谈论到 Jade 模板问题,Jade 早已改名为 Pug,并且发布了2.0版本,想着不如升...

lain_lee ⋅ 2017/11/23 ⋅ 0

【工程化】从0搭建VueJS移动端组件库开发框架

之前发表过一篇《Vue-Donut——专用于构建Vue的UI组件库的开发框架》,仅仅是对框架一个粗略的介绍,并没有针对里面的实现方式进行详细说明。 最近参与维护公司内部的一个针对移动端的UI组件...

jrainlau ⋅ 2017/06/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部