学习Webpack4.0｜undefined

前言

项目需要对webpack进行升级，至最新版本4.x.0。So,边学边写文章。
webpack是时下最为热门的前端打包工具，将你的工程项目进行模块化处理。

核心概念

入口（entry）
输出（output）
loader
插件（plugins）
模式（mode）

mode

webpack 4.0版本推广0配置使用webpack,在之前的版本中，我们都需要创建一个名为webpack.config.js的文件来配置webpack，但在webpack 4.0中我们可以不创建配置文件也能进行打包。（虽然0配置算的上是噱头，因为大型项目中默认配置是无法满足需求的）
webpack 4.0新增了mode的理念，development和production模式，前者将使用webpack在开发环境下的一些默认配置，打包后文件不会被压缩，后者会使用生产环境下的默认配置。

通过选择development或production之中的一个来设置mode参数，你可以启用相应模式下的webpack内置的优化。

module.exports = {
  //mode 的默认值为 production ，也可设置为 development 或 none
  mode: 'production'
};

也可从CLI参数中传递:

1	webpack --mode=production

entry

入口是webpack的构建起始文件，webpack将从入口开始构建内部的依赖图，是整个项目的“根”。

1
2
3

module.exports = {
  entry: './path/to/my/entry/file.js'
};

单个入口

上面一个demo的写法是下面写法的简写，当我们的工程只有一个入口时，可以使用上面的简写。

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

多个入口

在多页面应用中，我们可能需要创建多个入口，像下面这样。

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

output

我们需要告诉webpack在哪里输出打包后的文件。
配置output选项可以控制webpack如何向硬盘写入编译文件（生成打包后文件）。注意，即使可以存在多个入口起点，但只指定一个输出配置。
output至少包含以下两点：

path指定输出目录的绝对路径。
filename指定输出文件的文件名。

module.exports = {
  entry: './path/to/my/entry/file.js',
  //输出文件为 /home/proj/public/assets/my-first-webpack.bundle.js 
  output: {
    path: '/home/proj/public/assets',
    filename: 'my-first-webpack.bundle.js'
  }
};

多个入口起点

如果配置了多个入口起点，需要保证每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

在JavaScript里import/require一张图片会报错,但在webpack下，这是允许的，这归功于加载器（loader）。webpack自身只理解Javascript，所以对于css,html,图片等文件需要通过loader来进行转换。使得webpack可以识别和处理这些文件。

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      //txt loader
      { test: /\.txt$/, use: 'raw-loader' },
      //typescript loader
      { test: /\.ts$/, use: 'ts-loader' },
      //css loader
      { test: /\.css$/, use: 'css-loader' },
    ]
  }
};

module.exports = config;

rules属性用来指示loader的处理逻辑，当webpack遇到.txt文件时，将会使用rao-loader先转换文件。在使用loader之前，需要先使用npm或yarn安装相应的loader。

使用loader的方式

配置（推荐）：在webpack.config.js中指定loader,向上面的配置方式。

module: {
    rules: [
      {
        test: /\.css$/,
        //配置多个loader
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

内联：在每个import语句中指定loader。

1 2	//使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。 import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI：在shell命令中指定loader。

1	webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

plugins

插件可以为工程赋予更多的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件目的在于解决loader无法实现的其他事。
使用插件：你只需要require()它，然后把它添加到plugins数组中。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

前言
核心概念
mode
entry
1. 单个入口
2. 多个入口
output
1. 多个入口起点
loader
1. 使用loader的方式
plugins