文档章节

webpack1和webpack2版本的区别

hezhongjie
 hezhongjie
发布于 2017/05/03 11:46
字数 688
阅读 118
收藏 1

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
粉丝 4
博文 102
码字总数 50748
作品 0
程序员
升级到Webpack2坑——热加载不自动刷新

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

Evelynzzz
01/09
0
0
webpack3新特性简介

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

shptc
2017/06/23
0
0
React router动态加载组件-适配器模式的应用

前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式。 一、普通路由例子 以上是最常见的。在简单的单页应用中,这样写是ok的。因为打包后的单一js文件也不过200k左右,之后,对加载性...

我是leon
09/12
0
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
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
0

没有更多内容

加载失败,请刷新页面

加载更多

Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
15
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部