查看: 1225|回复: 0

[JavaScript/JQuery] react闲谈——webpack1升级webpack2注意事项

发表于 2017-5-19 12:00:01

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

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

1、resolve配置

以前你可能这么写:

  1. resolve: {
  2. extensions: ['', '.jsx', '.js', '.json'],
  3. modulesDirectories: ['node_modules', 'src'],
  4. alias: {
  5. actions: __dirname + `/src/actions`,
  6. components: __dirname + `/src/components`,
  7. containers: __dirname + `/src/containers`,
  8. reducers: __dirname + `/src/reducers`,
  9. store: __dirname + `/src/store`
  10. }
  11. }
复制代码

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

  1. resolve: {
  2. extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
  3. modules: [
  4. path.resolve(__dirname, 'node_modules'),
  5. path.join(__dirname, './src')
  6. ]
  7. }
复制代码

2、module配置

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

  1. loaders: [{
  2. test: /\.(js|jsx)$/,
  3. loaders: ['react-hot', 'babel-loader'],
  4. exclude: /node_modules/
  5. }, {
  6. test: /\.(less|css)$/,
  7. loader: "style-loader!css-loader!less!postcss-loader"
  8. }, {
  9. test: /\.(png|jpg|gif|svg)$/,
  10. loader: 'file?name=[md5:hash:base64:10].[ext]'
  11. }, {
  12. test: /\.json$/,
  13. loader: 'json'
  14. }, {
  15. test: /\.md$/,
  16. loader: 'file?name=[name].[ext]'
  17. }]
  18. }
复制代码

现在你该这么写:

a、外层loaders改为rules

b、内层loader改为use

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

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

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

  1. module: {
  2. rules: [{
  3. test: /\.(js|jsx)$/,
  4. use: ['babel-loader'],
  5. exclude: /node_modules/,
  6. include: path.join(__dirname, 'src')
  7. }, {
  8. test: /\.(less|css)$/,
  9. use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
  10. }, {
  11. test: /\.(png|jpg|gif|md)$/,
  12. use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
  13. }, {
  14. test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  15. use: ['url-loader?limit=10000&mimetype=image/svg+xml']
  16. }],
  17. }
  18. };
复制代码

3、plugins配置

以前你可能这么写:

  1. new webpack.optimize.OccurenceOrderPlugin(),
  2. new webpack.HotModuleReplacementPlugin(),
  3. new webpack.NoErrorsPlugin(),
  4. new webpack.optimize.UglifyJsPlugin()
复制代码

现在你该这么写:

a、移除了OccurenceOrderPlugin 和 NoErrorsPlugin

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

  1. new webpack.HotModuleReplacementPlugin(),
  2. new webpack.optimize.UglifyJsPlugin()
复制代码

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

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

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

  1. var path = require('path');
  2. var webpack = require('webpack');
  3. var autoprefixer = require('autoprefixer');
  4. var precss = require('precss');
  5. //判断当前运行环境是开发模式还是生产模式
  6. const nodeEnv = process.env.NODE_ENV || 'development';
  7. const isPro = nodeEnv === 'production';
  8. console.log("当前运行环境:", isPro)
  9. var plugins = []
  10. if (isPro) {
  11. plugins.push(
  12. new webpack.optimize.UglifyJsPlugin({
  13. compress: {
  14. warnings: false
  15. }
  16. }),
  17. new webpack.DefinePlugin({
  18. 'process.env':{
  19. 'NODE_ENV': JSON.stringify(nodeEnv)
  20. }
  21. })
  22. )
  23. } else {
  24. plugins.push(
  25. new webpack.DefinePlugin({
  26. 'process.env':{
  27. 'NODE_ENV': JSON.stringify(nodeEnv)
  28. },
  29. BASE_URL: JSON.stringify('http://localhost:9009'),
  30. }),
  31. // new webpack.optimize.OccurenceOrderPlugin(),
  32. new webpack.HotModuleReplacementPlugin()
  33. // new webpack.NoErrorsPlugin()
  34. )
  35. }
  36. module.exports = {
  37. devtool: false,
  38. entry: {
  39. app: [
  40. 'webpack-hot-middleware/client?path=http://localhost:3011/__webpack_hmr&reload=true&noInfo=false&quiet=false',
  41. 'babel-polyfill',
  42. './src/index'
  43. ]
  44. },
  45. output: {
  46. filename: '[name].js',
  47. path: path.join(__dirname, 'build'),
  48. publicPath: 'http://localhost:3011/build/',
  49. chunkFilename: '[name].js'
  50. },
  51. // BASE_URL是全局的api接口访问地址
  52. plugins,
  53. // alias是配置全局的路径入口名称,只要涉及到下面配置的文件路径,可以直接用定义的单个字母表示整个路径
  54. resolve: {
  55. extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
  56. modules: [
  57. path.resolve(__dirname, 'node_modules'),
  58. path.join(__dirname, './src')
  59. ]
  60. },
  61. module: {
  62. rules: [{
  63. test: /\.(js|jsx)$/,
  64. use: ['babel-loader'],
  65. exclude: /node_modules/,
  66. include: path.join(__dirname, 'src')
  67. }, {
  68. test: /\.(less|css)$/,
  69. use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
  70. }, {
  71. test: /\.(png|jpg|gif|md)$/,
  72. use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
  73. }, {
  74. test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  75. use: ['url-loader?limit=10000&mimetype=image/svg+xml']
  76. }],
  77. }
  78. };
复制代码


回复

使用道具 举报