webpack4.29.x成神之路(十四) 区分开发和生产环境

栏目: JavaScript · 发布时间: 4年前

内容简介:上节:上节目录如下:

目录

上节: 摇树优化(tree shaking)

上节目录如下:

webpack4.29.x成神之路(十四) 区分开发和生产环境

环境介绍

webpack的mode选项有三个值:development | production | none, 分别看下不同模式下webpack的默认配置:

webpack4.29.x成神之路(十四) 区分开发和生产环境

详细参考: https://webpack.js.org/config...

从默认配置也可以看出,开发和生产模式下的配置很不一样,所以是有必要给开发和生产环境分别写一份配置。

开始

现在webpack.config.js的内容大概是这样的:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'bundles')
  },

  // 开启devServer
  devServer: {},

  
  // optimization: {
  //   // production模式下默认开启
  //   usedExports: true
  // },

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

根目录下新建一个目录webpack, 并将webpack.config.js复制两份到该目录下,

重命名为webpack.dev.js和webpack.prod.js,目录如下:

webpack4.29.x成神之路(十四) 区分开发和生产环境

先来写开发环境下的配置,

webpack/webpack.dev.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, '../bundles')
  },

  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

生产环境下的配置,

webpack/webpack.prod.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { resolve } = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash:10].js',
    path: resolve(__dirname, '../bundles')
  },

  devtool: 'cheap-module-source-map',

  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }, {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CleanWebpackPlugin()
  ]
};

开发环境去掉了CleanWebpackPlugin,postcss-loader

生产环境去掉了devServer

并且都设置了不同devtool和output.filename

然后修改package.js的scripts属性:

"scripts": {
    "dev": "webpack-dev-server --config webpack/webpack.dev.js",
    "build": "webpack --config webpack/webpack.prod.js"
  },

因为配置文件的名称和路径都变了,所以要用--config来指定

这时npm run build或npm run dev一切正常,配置也已区分。

抽离公共配置

现在两种模式下的配置文件有很多的是相同的,我们需要把它们抽离出来。

新建webpack/webpack.base.js,并把公共配置添加进去。

webpack/webpack.base.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, '../bundles')
  },


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

// 然后把webpack.dev.js和webpack.prod.js里的公共代码删除。

webpack/webpack.dev.js:

module.exports = {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
};

webpack/webpack.prod.js:

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },

  devtool: 'cheap-module-source-map',

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};

然后用webpack-merge插件把webpack.base.js合并到webpack.dev.js和webpack.prod.js里去.

继续修改配置

webpack/webpack.dev.js:

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
});

merge函数返回合并后的配置对象,webpack.prod.js也一样:

const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base');
module.exports = merge(baseConfig, {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
});

然后安装:npm i webpack-merge -D

装完后再试下npm run dev和npm run build,效果应该还是正常的。

环境变量

到目前为止,区分配置其实已经完成,根目录下的webpack.config.js已经可以删了,但我们经常会看到很多人在一个文件中就做到区分配置,这里就需要用到环境变量。这里只介绍这种方式的做法,后续并不会用这种方式。

比如我只想用webpack.config.js这一个配置文件,那么可以这么写:

webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');

const baseConfig = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, './bundles')
  },


  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(gif|jpg|jpeg|png|svg)$/,
      use: ['url-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};



const devConfig = {
  mode: 'development',
  output: {
    filename: '[name].js'
  },
  devtool: 'cheap-module-eval-source-map',

  // 开启devServer
  devServer: {},

  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader']
    }]
  }
}

const prodConfig = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash:10].js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
}

module.exports = env => {
  return env === 'development' ? merge(baseConfig, devConfig) : merge(baseConfig, prodConfig);
}

最后导出的配置取决于env的值,这个值在命令行中设置,比如:

运行开发环境:npx webpack-dev-server --env development

运行生产环境:npx webpack-dev-server --env production

如果配置过于复杂,还可以将loader或plugin单独分离出去

下节:代码分隔(code spliting)上(待更新)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

One Click

One Click

Richard L. Brandt / Portfolio Hardcover / 2011-10-27 / 25.95

An insightful look at how Amazon really works and how its founder and CEO makes it happen. Amazon's business model is deceptively simple: make online shopping so easy and convenient that customers ......一起来看看 《One Click》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具