从0学习webpack

webpack的学习日志
1，webpack的初始化及打包
新建一个文件夹test，在该文件夹通过git或者cmd初始化配置npm，并且下载webpack、webpack-cli

npm init
npm i -D webpack webpack-cli

在test文件夹下新建一个src文件夹，然后再src文件夹下新建一个main.js文件

在main.js输入
console.log("test webpack~");

配置package.json打包的命令

在package.json配置
"scripts": {
    "bulid": "webpack src/main.js"
}

在webpack文件下看到一个dist文件夹，dist文件夹下有一个mian.js，则代表打包成功。

2，自定义配置webpack
上面一个简单的例子只是webpack自己默认的配置，下面我们要实现更加丰富的自定义配置 新建一个build文件夹,里面新建一个webpack.config.js

在webpack.config.js中配置
// 引入path
const path = require("path");
module.exports = {
    mode: "development", //开发模式
    entry: path.resolve(__dirname, "../src/main.js"),  //入口文件
    output: {  // 出口文件
        filename: "output.js",  //打包后的文件名称
        path: path.resolve(__dirname, "../dist")  //打包后的目录
    }
}

重新更改我们的打包命令

在package.json中修改打包命令
"scripts": {
    "bulid": "webpack --config build/webpack.config.js",
}

执行 npm run build 会发现生成了以下目录

3，配置HTML模板
js文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js
实际上我们日常开发中往往会这样配置:

module.exports = {
    // 省略其他配置
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    }
}

这时候生成的dist目录文件如下

为了缓存，你会发现打包好的js文件的名称每次都不一样。webpack打包出来的js文件我们需要引入到html中，但是每次我们都手动修改js文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情

//下载安装html-webpack-plugin
npm i -D html-webpack-plugin

新建一个build同级的文件夹public,里面新建一个index.html

修改webpack.config.js文件的配置

//webpack.config.js文件下输入
// 引入path
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development", //开发模式
    entry: path.resolve(__dirname, "../src/main.js"),  //入口文件
    output: {  // 出口文件
        filename: "[name].[hash:8].js",  //打包后的文件名称
        path: path.resolve(__dirname, "../dist")  //打包后的目录
    },
    plugins: [  //插件配置
        new HtmlWebpackPlugin({ // 打包输出HTML
            title: 'Hello World app',
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve(__dirname, "../public/index.html")
        }),
    ]
}

运行npm run bulid 打包之后就会发现，mian.js文件会自动加载到index.html文件下

如果出现下面的报错信息，则是因为webpack4.0.0以上的版本不支持html-webpack-plugin
重新通过下面命令下载插件就可以解决

cnpm i extract-text-webpack-plugin@next -D
cnpm i html-webpack-plugin@next -D

4，多入口文件如何开发
生成多个html-webpack-plugin实例来解决这个问题，修改配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development', // 开发模式
    entry: {
      main:path.resolve(__dirname,'../src/main.js'),
      header:path.resolve(__dirname,'../src/header.js')
  }, 
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html'),
        filename:'index.html',
        chunks:['main'] // 与入口文件对应的模块名
      }),
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/header.html'),
        filename:'header.html',
        chunks:['header'] // 与入口文件对应的模块名
      }),
    ]
}