webpack使用

Get Started

1. 安装
2. 运行、转译js
3. 转译html
4. 转译css
5. 预览网页

webpack

webpack可以：
①转译代码（es6转为es5,scss转为css）
②构建build
③代码压缩
④代码分析

可以使用下列命令行查询信息

npm info webpack version  //查看版本号
npm info webpack //查看所有信息

1. 安装

查询文档，在概览（concepts）或导航（guides）中可以找到官方给出的下载命令行。

mkdir webpack-demo    // 新建目录
cd webpack-demo    // 打开
npm init -y                // 初始化，得到一个package.json文件
npm install webpack@4.x  webpack-cli@3.x --save-dev    // 按照版本安装（本地）并生成两个文件: ①是node_modules; ②是package-lock.json文件.

用yarn也可以，在这里我使用的是yarn add webpack@4 webpack-cli@3 --dev。

2. 运行、转译js

如何使用本地安装的webpack

npx  webpack    //npx在windows不够稳定 如果安装node_modules里面有空格的话 可能会不起作用
// 或者是
./node_modules/.bin/webpack --version //当npx不能用的时候，可以退回这种手动找路径的方式

执行npx webpack 时运行警告解决方法
执行npx webpack后可能会出现这样的警告。

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
or. Learn more: https://webpack.js.org/configuration/mode/ 

我们可以看出这个警告是与配置有关，并且是关于mode这个选项没有设置。
首先查看官方文档查找关于configuration的信息，按照文档给出的方法创建webpack.config.js。然后在文件里写入以下内容：

var path = require('path');

module.exports = {
  mode: 'development',      // 这是开发者模式，此外还有production模式
  entry: './foo.js',                //  entry，用来设置想要转译代码的文件
  output: {
    path: path.resolve(__dirname, 'dist'),  // 默认dist目录
    filename: 'foo.bundle.js'  // output，转译后生成的文件，可以设置文件名
  }
};

我们可以使用filename: '[name].[contenthash].js'自动生成一个新的不重名的文件。
指令简化
每次都要生成新的 js 文件，越积越多，所以需要使用rm rf dist; npx webpack删掉dist目录再重新打包。
但是这样的命令又太长了，每次用起来麻烦，我们可以在 package.json 文件的 scripts 方法里面增加上"build":"rm -rf dist && webpack"，运行 yarn build 或者 npm run build 即可。

3. 转译html

根据官方中文手册：https://webpack.docschina.org/plugins/html-webpack-plugin/
首先加载插件。

npm install --save-dev html-webpack-plugin
// 或
yarn add html-webpack-plugin --dev

然后在webpack的js文件中添加以下代码，生成一个html文件。

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

我们只是要生成html，所以只留HtmlWebpackPlugin与export中的plugins: [new HtmlWebpackPlugin()],。运行yarn build，就会在dist中生成一个html文件。
插件配置
https://github.com/jantimon/html-webpack-plugin#options
在官方手册中打开插件配置可以找到所有设置还有例子。

配置.png
图中使用的是title和template。

title
替换生成html中的标题名，需要将模板中的标题名换成<title><%= htmlWebpackPlugin.options.title %></title>
template
以该路径的模板生成一个html，这个模板需要提前设置好，不然空模板只会生成一串script标签。

4. 转译css

与转译 html 步骤相似，通过查询官方文档下载插件及配置，不过这里需要注意的是 css-loader 需要与 style-loader 一起使用（两个都要下载）。
css-loader 将 css 文件引入到 js 中，style-loader 则是将其转为 style 标签插入到 head 标签里。

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

css抽出文件
除了将 css 放进 style 标签插入 html，还可以将 css 内容打包抽出，再在 html 里引入 css 文件，这个时候就要用到MiniCssExtractPlugin这个插件了。
还是跟上面一样下载并且配置。

module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },

5. 实时预览网页

下载插件 webpack-dev-server 并配置，在 package.json 的 scripts 方法里添加 "start": "webpack-dev-server" ，简化指令就可以使用 yarn start 来开启预览了。
mode 切换
mode的使用一半分为为开发者提供的 development 和生产（打包）用的 production。
想分别使用

(1)
在文件内设置标识(if( TARGET === 'start' )、if( TARGET === 'build' ))，根据指令来分别是哪种模式，再根据模式进行不同的操作。
(2)
也可以创建一个基础的通用文件（webpack.config.common.js），再分别创建两种模式单独使用的文件，并在其中的设置中调用通用文件的配置（...common）。使用指令时还需要在 package.json 文件中添加 "build": "rm -rf dist && webpack --config webpack.config.prod.js", 来区分调用文件。