webpack 三

之前06年写了两篇自己研究webpack的文章，由于webpack已经升到了4.x，今天用起来发现有点小变化，重新自己建一个简单的项目，这里记录一下过程

1、安装webpack和webpack-cli

　以前安装webpack就行了，现在还需要安装webpack-cli，不然会报错。 安装方法一样  cnpm i -g webpack  和 cnpm i -g webpack-cli  这里采用全局安装。

2、手动创建文件夹 webpack.config.js 文件，首先根据官网来以最简单的打包方式，这个文件里必须有entry、output和mode。

const path = require('path');
module.exports = {
  entry: './a.js',    //入口文件地址
  output: {
    path: path.resolve(__dirname, 'dist'),  //现在这里必须是绝对路径
    filename: 'my-first-webpack.bundle.js'   //输出文件的名字
  },
  mode: 'development'    //如果不在这里指定development 或 production会报错
};

这里注意，如果不指定mode会给警告，并且没有把需要打包的内容打包进去。

当然不在这里写也可以在打包的时候指定 webpack --mode developent 来指定

这里不得不说，官网的文档真是不好找，找了好久才找到，这里记录一下，相关的命令比如说常用的--progress，--config，--watch，--display-module，--colors等命令，在api =>命令行接口里找。

还有需要说明的一点是，输入路径output里的path必须是绝对路径，相对路径会报错。

3、写完上面的，输入webpack，确实可以打包了，把a.js打包到了dist里面的my-first-webpack.bundle.js中，但这样很简单，不太适合实际的应用场景，实际中可能是多个入口文件，打包成多个文件来适应不同的场景，这里有两个点，第一个是入口文件可以支持对象的方式用来打包

  entry: {
      one:'./a.js',
      two:'./b.js'
  }

第二个是如果入口文件是多个文件，那输出也必须是多个，那么就要用到占位符

最后我代码改成了这样

const path = require('path');
module.exports = {
  entry: {
      one:'./a.js',
      two:'./b.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  mode: 'development',
};

4、操作完了上面的，确实是可以打包出来，但还是有点不太符合实际场景，就是如果我写一个html文件，引用了一个script（路径是写死的），那么如果是多个并且是自动生成的我要如何写。于是用了webpack里面的插件，其中有一个插件是html-webpack-plugin。

先安装  cnpm i html-webpack-plugin -D 我这里没有全局安装。

安装后，在webpack.config.js中引用，并且添加到plugins中，通过使用new操作创建一个实例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
      one:'./a.js',
      two:'./b.js'
  },
  output: {
    path: path.resolve(__dirname, './'),
    filename: './dist/[name].js'
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({template: 'index.html'})
  ]
};

这里我对output输出路径也做了一点小修改，使输出的html和生成的js不在同一个文件夹内。基本上到这就差不多了。

相关的插件可以看官网  https://www.webpackjs.com/plugins/

至于filename(可以是‘'index-[hash].html'’)、inject(规定了放在什么地方)、title、minify(设置生成后的文件如去空格去注释等)等配置在哪。

相关配置看：https://github.com/jantimon/html-webpack-plugin#minification  minifier： https://github.com/kangax/html-minifier

这里需要说的是htmlwebpackplugin是支持模板语言的，在html中可以用ejs语法来写 <%= htmlWebpackPlugin.options.title%> 可以取到里面title设置的值。

如果想多生成html，就再调用一次，通过truncks:[]来引入想引入的文件

5、webpack除了entry、output、plugins还有一个重要的就是loader，他告诉webpack在除了处理js以外如何处理其他文件，比如说图片，音频，视频，css，less等。

现在的版本已经改成了这样用，需要处理哪些格式的文件

  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

test 属性，是一个正则表达式，用于解析什么文件。
use 属性，表示进行转换时，应该使用哪个 loader。

使用之前先安装相应的loader

有哪些loader可以安装，如何安装和如何引用可以看官网  https://www.webpackjs.com/loaders/

对于rules进行相应的配置 ，见文档  https://www.webpackjs.com/configuration/module/#rule

其中比较重要和常用的：

一、其中Rule.options 和 Rule.query已经被废弃了，现在写在use里

use: [
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 1
    }
  },
  {
    loader: 'less-loader',
    options: {
      noIeCompat: true
    }
  }
]

二、include和exclude，用来指定哪些用来打包，可以大大压缩打包时间。

就暂时这些。