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  //局部安装
  1. 小试牛刀处理一个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"),
]
  1. 修改原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
  1. 配置新的loader:
{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
}
  1. 坑!提示找不到”@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
  1. 引入插件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
  1. 新增一个插件配置项:
    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下载

发表评论

邮箱地址不会被公开。 必填项已用*标注