webpack从0到1的配置（六）

webpack从0到1的配置（一）

webpack从0到1的配置（二）

webpack从0到1的配置（三）

webpack从0到1的配置（四）

webpack从0到1的配置（五）

到此为止，webpack配置文件只有一个，下面我们要写三个配置文件，分别是webpack.base.config.js(开发和生产环境相同的配置)、webpack.dev.config.js(开发环境下的配置)、webpack.prod.config.js(生产环境下的配置)

• 在项目目录下新建webpack文件夹，新建webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个文件

• 修改package.json文件
• 执行npm run build 命令时，使用的是webpack目录下的webpack.prod.config.js
• 执行npm run dev 命令时，使用的是webpack目录下的webpack.dev.config.js, 并且通过webpack-dev-server 开启了一个本地服务器

"scripts": {
    "build": "webpack --config ./webpack/webpack.prod.config.js",
    "dev": "webpack-dev-server --open webpack --config ./webpack/webpack.dev.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• webpack.base.config.js文件里的配置在之前我们的webpack.config.js文件的代码基础上删除devServer的配置,并改打包出口的path属性，因为配置文件放到了webpack文件夹下了。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: {
    main: './src/main.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '../dist'), // 注意dist路径改为 ../dist
  },
- devServer: {
-   contentBase: path.resolve(__dirname, 'dist'),
-   host: 'localhost',
-   port: '8080',
- },
  module: {
    rules: [
    {
      test: /\.css$/,
      use: [{
        loader: MiniCssExtractPlugin.loader,
      }, 'css-loader']
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: "css/[id].css"
    }),
    new HtmlWebpackPlugin({
      title: 'index', // <title>标签的内容
      template: './index.html', // 以哪一个html为模版
    }),
  ]
}

• devServer的配置应该在webpack.dev.config.js文件里，而webpack.dev.config.js需要和webpack.base.config.js合并
• 这里需要安装webpack-merge 插件
• npm install webpack-merge --save-dev
• 设置mode属性的值为"development"后，process.env.NODE_ENV的值会被设置为"development"
• 在配置文件中可以判断process.env.NODE_ENV等于"development"还是"production"来做一些针对于开发或者生产环境不同的配置
• webpack.dev.config.js文件的配置如下

const baseWebpackConfig = require('./webpack.base.config');
const merge = require('webpack-merge');
const webpack = require('webpack');
const devWebpackConfig = merge(baseWebpackConfig, {
    mode: 'development',
    devtool: 'inline-source-map', // 可在浏览器控制台调试源码,不过会减慢打包速度
    devServer: {
      contentBase: path.resolve(__dirname, "../dist"), // 告诉服务器文件资源在哪里
      host: 'localhost',
      port: 8080,
      hot: true,
    },
    plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),  // 模块热更新插件
    ]
  });
module.exports = devWebpackConfig;

• webpack.prod.config.js 配置见 webpack从0到1的配置（七）