Node.js学习（10）webpack打包工具

概念

Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源

四个核心概念

• Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
• Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
• Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析： JavaScript、json）。
• Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

基本使用

1. 生成package.json文件
2. 安装webpack（都要安装）：

npm install webpack@3 -g  //全局安装
npm install webpack@3 --save-dev  //局部安装

3. 小试牛刀处理一个js
   执行命令：

webpack src/js/index.js build/index.js

观察发现webpack会把es6的模块化语法，直接编译为浏览器识别的模块化语法，不过类似于箭头函数等依然存在

DEMO下载

使用webpack配置文件

执行webpack命令时，会在当前目录查找webpack.config.js文件读取配置

1.通过Commonjs暴露出去一个对象
2.四个关键的概念：

• entry：入口文件，将所有打包资源全部引入
• output：输出文件，将资源输出到指定目录下
• loader：处理webpack不能够解析的模块
• plugins：执行loader做不了的任务

3.如何找到自己想要的loader？
优先去官网找自己想要的loader，没有再去npm官网上找。
4.在终端输入：webpack ./src/js/app.js ./build/js/built.js
问题：这种方式只能够编译打包js、json文件，其他文件处理不了
5.webpack --display-modules可以查看隐藏的任务

配置npm命令

在package.json中配置npm命令：

...
"scripts": {
    "build": "webpack"
},

以后打包应用只需要运行:npm run build即可等价于执行webpack

解析less文件

安装：

npm install less-loader@4.1.0 less --save-D
npm install css-loader style-loader --save-D

向rules中写入配置

    {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // 创建一个style标签，将js中的css放入其中
        }, {
            loader: "css-loader" // 将css以CommonJs语法打包到js中
        }, {
            loader: "less-loader" // 将less转换成css
        }]
    }

在入口js中引入less文件：import '../less/demo.less'。
完整的webpack.config.js内容如下：

const path = require('path'); //path内置的模块，用来设置路径。

module.exports = {
    //入口（从哪里进入开始解析）
    entry: './src/js/index.js',

    //出口（最终加工完的代码输出到哪里）
    output: {// 输出配置
        path: path.resolve(__dirname, 'build'),//输出文件路径配置
        filename: 'index.js',// 输出文件名
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // 创建一个style标签，将js中的css放入其中
                }, {
                    loader: "css-loader" // 将css以CommonJs语法打包到js中
                }, {
                    loader: "less-loader" // 将less转换成css
                }]
            }
        ]
    }
};

DEMO下载

处理图片资源

file-loader

使用file-loader处理图片资源
安装：

npm install --save-dev file-loader

新增loader：

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'file-loader', //如果不做图片转base64，可以用file-loader
            options: {
                outputPath:'img', //图片最终输出的位置
                publicPath:'../build/img',//css资源图片路径
                name:'[hash:5].[ext]'//修改图片名称
            }
        }
    ]
}

DEMO下载

url-loader

使用url-loader处理图片资源,将小图片转为base64
安装：

npm install url-loader --save-D

修改loader为：

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
            loader: 'url-loader',       //如果不做图片转base64，可以用file-loader
            options: {
                limit: 8192,            //只将8KB以下的图片转为base64
                outputPath: 'img',         //图片最终输出的位置
                publicPath: '../build/img',     //css资源图片路径
                name: '[hash:5].[ext]'     //修改图片名称
            }
        }
    ]
}

备注：一定要注意路径的问题
DEMO下载

提取css文件

1.安装ExtractTextWebpackPluginh插件：

npm install extract-text-webpack-plugin --save-D

2.引入插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

3.新增plugins插件配置项，并实例化ExtractTextPlugin插件：

plugins: [
    //提取css为单独文件
    new ExtractTextPlugin("./css/index.css"),
]

4. 修改原less-loader的配置如下：

{
    test: /\.less$/, //匹配文件的规则，说明该loader对哪个文件生效
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: ["css-loader","less-loader"]
    })
}

DEMO下载

ES6转ES5

1. 安装babel-loader

npm install babel-loader babel-core babel-preset-es2015 --save -D

2. 配置新的loader：

{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
}

3. 坑！提示找不到”@babel/core”，根据提示执行：npm i babel-loader@7 --save -D

html文件的处理和清除文件夹

1. 对于html的操作，虽然有了html-loader这个loader，不过他基本做不了什么，我们的需求是：
   想让webpack自动的帮我们创建一个html，然后把我们想要引入的东西引入进来，所以要借助插件。
2. 使用插件HtmlWebpackPlugin，安装：

npm install --save-dev html-webpack-plugin

3. 引入插件：

var HtmlWebpackPlugin = require('html-webpack-plugin');

4. 新增一个插件配置项：

    new HtmlWebpackPlugin({
    title:"webpack",
    filename:"index.html",
    template:"./src/index.html"
   }),

备注：要在html模板中写入<title><%= htmlWebpackPlugin.options.title %></title>，title配置才生效
5. 删除掉模板html中的所有引入
6. 为了清空工作目录，安装插件：clean-webpack-plugin，命令：npm i clean-webpack-plugin -D
7. 引入插件： const CleanWebpackPlugin = require('clean-webpack-plugin')
8. 实例一个插件：new CleanWebpackPlugin()

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    ... 
    plugins: [
        //提取css为单独文件
        new ExtractTextPlugin("./css/index.css"),
        new HtmlWebpackPlugin({
            title:"webpack",
            minify: { // 压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符与换行符
                minifyCSS: true// 压缩内联css
            },
            filename:"index.html",
            template:"./src/index.html"
        }),
        new CleanWebpackPlugin()
    ]
};

执行npm run build后，build文件夹将多出一个index.html文件

DEMO下载