Webpack 系列之快速入门

Question

入口

单文件入口 指定 entry 键值

const config = {
  entry: './yourpath/file.js'
};
module.exports = config

上面的是以下的简写：

const config = {
  entry: {
    main: './yourpath/file.js'
  }
};
module.exports = config

多文件入口
对 entry 采用对象写法，指定对应的键值对，为了输出这多个文件可以使用占位符

const path = require('path');
const config = {
  entry: {
    app1: './src/main.js',
    app2: './src/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

输出

指定打包构建之后输出的文件，单文件输出，指定 output 键值，值为对象，对象中指定 path 和 filename

const path = require('path');
const config = {
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

多文件输出

使用占位符，输出文件将按照多文件入口指定的键来替代占位符

const path = require('path');
const config = {
  entry: {
    app1: './src/main.js',
    app2: './src/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

module.exports = config;

Loader

Loader 可以在加载模块时预处理文件，类似于 gulp 中的 task。配置 loader 需要在 module 选项下指定对应后缀名相应的rules，使用 test 正则指定后缀名，使用 use 指定相应的 loader

允许在 js 中 import css

需要使用 style-loader 和 css-loader，首先需要安装：

npm i css-loader style-loader --save-dev

使用 loader

const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }]
  }
};

module.exports = config;

模块文件写法：

import './css/main.css'

允许加载图片

需要使用 file-loader，首先安装：

npm i file-loader --save-dev

使用：

const path = require('path');

const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /.(png|jpg|svg|gif)$/,
      use: [
        'file-loader'
      ]
    }]
  }
};

module.exports = config;

模块文件写法：

import logo from './image/logo.svg';

插件

插件的目的在于解决loader解决不了的事情，使用插件指定 plugins 选项即可，需要注意的使用插件需要引入插件。如使用HtmlWebpackPlugin插件为我们自动生成一个html文件。

首先安装：

npm i --save-dev html-webpack-plugin

配置webpack

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },{
      test: /.(png|jpg|svg|gif)$/,
      use: [
        'file-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '我的webpack'
    })
  ]
};

module.exports = config;

使用 source map

源代码被 webpack 打包之后，会很难追踪到原始的代码的位置，使用source map功能，可以将编译后的代码映射回原始代码位置，指定devtool选项即可：

const config = {
  // ....
  devtool: 'inline-source-map'
};

module.exports = config;

使用 webpack-dev-server

webpack-dev-server 提供了一个简单的web服务器，并能够实时重新加载使用webpack需要先安装：

npm i --save-dev webpack-dev-server

在配置文件中指定 devServer 选项，告诉服务器在哪里寻找文件

const config = {
  // ....
  devServer: {
    contentBase: './dist'
  }
};

module.exports = config;

使用命令行运行命令或者在 package.json 中指定 scripts

webpack-dev-server --open

此时服务将运行在 8080 端口，其中 open 选项表示服务开启之后立即在默认浏览器中打开页面。

开启热更新

开启热更新很简单，只需要更新 webpack-dev-server 配置，增加 hot 选项，同时使用 webpack 自带的 HMR 插件

const config = {
  // ....
  devServer: {
    contentBase: './dist',
    hot:true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = config;

精简输出

在实际中是开发中可能有些模块的方法并没有被使用，也就是说，在开发中这些方法并没有被 import，这些没有被使用的代码应该被删除的，使用 uglifyjs-webpack-plugin 插件可以帮助我们删除这些代码，同时做代码混淆和压缩。安装：

npm i -D uglifyjs-webpack-plugin

使用：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

const config = {
  // ....
  plugins: [
    new UglifyJSPlugin()
  ]
};

module.exports = config;

生产和开发构建分离

生产和开发中的构建肯定是不同，生产中侧重于一个更好的开发体验，而生产环境中则需要更多的性能优化，更小的chunk。webpakck可以指定命令运行以来的配置文件，通过在 package.json 中写入script是一种不错的方式。而生产和开发中的配置肯定有很多重复的地方，使用 webpack-merge 可以合并通用配置，安装：

npm i -D webpack-merge

webpack.common.js

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

const config = {
  entry: './src/main.js',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'My App'
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
}

module.exports = config;

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common');

const config = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

module.exports = config;

webpack.prod.js

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common');

const config = merge(common, {
  plugins: [
    new UglifyJSPlugin()
  ]
});

module.exports = config;

package.json

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

许多lib通过与 process.env.NODE_ENV 环境关联来决定lib中使用哪些内容，使用 webpack 内置的 DefinePlugin 可以为所有依赖指定这个变量。

const config = {
  // ......
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'MODE_ENV': JSON.stringify('production')
      }
    })
  ]
  // ......
}

让输出的文件名带有哈希值

让文件名带有 hash 可以方便在生产环境中用户及时更新缓存，让文件名带有 hash 可以使用和构建相关的[hash]占位符，也可以使用与 chunk 相关的 [chunkhash] 占位符，通常后一种是更好的选择

const config = {
  //......
  output: {
    filename: [name].[chunkhash].js,
    path: path.join(__dirname, 'dist')
  }
  // ......
}

让 webpack 不打包指定的 lib

在开发中有些时候我们需要webpack不打包某些lib，这在我们开发lib的时候特别常见，比如我们为react开发插件，不希望打包的时候包含react。使用配置的external选项可以做到，

const config = {
  "externals": [
    "react",
    "react-dom"
  ]
}