webpack

发表于 | 分类于 | 阅读次数

安装nodejs

Https://nodejs.org/en/

npm

  • NodeJS包管理和分发工具
  • Http://npmjs.org/

npm常用命令

  • npm init 创建package.json文件
  • npm install <module-name> -g/--save-dev/--save安装模块
  • npm update <module-name>更新模块
  • npm uninstall <module-name>卸载模块

webpack

webpack简介

  • 一款模块加载器兼打包工具
  • 支持AMD/CMD写法
  • 处理依赖关系，然后解析出模块之间的依赖，将代码打包
  • 把各种资源都作为模块来使用和处理
  • 比如js、css、less、sass等
  • http://webpack.github.io/

安装webpack

  • npm install webpack -g

    • 安装后就在命令行中使用webpack命令

  • 把依赖写入package.json

    • npm install webpack --save-dev

  • webpack命令

    • 打包命令webpack index.js output.js
    • Index.js 打包的入口文件
    • output.js 打包后的文件

    webpack js/index.js build/build.js

    如果需要打包多个js文件到一个js文件，需要建立依赖关系

    比如js文件夹中有index.js和app.js

    app.js中

    1
    2
    var str = "hello webpackkkkk";
    module.exports = str;

    index.js中

    1
    2
    var s = require("./app.js");
    document.write(s);

    然后执行webpack js/index.js build/build.js

    index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="build/build.js"></script>
    </body>
    </html>

    用ES6的模块化语法

    demo.js

    1
    2
    let str = "ES6";
    export default str;

    index.js

    1
    2
    import s1 from "./demo.js"
    document.write(s1);

    然后执行webpack js/index.js build/build.js

    效果一样

  • 模块加载器（loader）

    • 各种不同文件类型的资源，webpack有对应的模块加载器

      安装加载器

      npm install xxx-loader --save-dev

      例如：npm install css-loader style-loader --save-dev处理css文件和样式

webpack配置说明

  • webpack的配置项说明

    • entry: 打包的入口文件 string Object

    • output: 配置打包结果 Object

      • path：定义输出文件路径
      • filename:指定打包文件名称

    • module:定义了对模块的处理逻辑 Object

      • rules：定义了一系列的加载器 Array

        [{

        ​ test:正则，匹配到的文件后缀名

        ​ loader/loaders:string | array，处理匹配到的文件

        ​ include:string | array 包含的文件夹

        ​ exclude: string | array 排除的文件夹

        }]

    • resolve：{

      ​ extensions:[“,’.js’”,”.css”,”jsx”] //自动补全识别后缀

      }

热加载

  • 先在全局安装npm install webpack-dev-server -g

  • 安装到依赖里面npm install webpack-dev-server --save-dev

  • 然后运行webpack-dev-server --open浏览器会自动打开

  • 端口被占用的话可以用webpack-dev-server --port 8081来修改端口号

  • 然后修改package.json "scripts": { "start": "webpack-dev-server" }

  • 再运行npm start就可以开启服务器

  • 若报一堆错误，请在当前目录下安装webpack npm install webpack

  • 热加载的配置如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const path = require('path');
    const webpack = require('webpack');   //1.引入webpack
    module.exports = {
      entry: './index.js',
      //2.添加插件
      plugins: [
        new webpack.HotModuleReplacementPlugin() // Enable HMR
      ],
      output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),   //路径是个坑，不能写相对路径
        publicPath: '/'
      },
      devServer: {
        hot: true, //3. Tell the dev-server we're using HMR
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'
      }
    };

    又发现一个有趣的事情

    在命令行里执行webpack-dev-server --hot --inline然后打开localhost:8080 发现是目录界面

原因是配置有问题

1
2
3
4
5
devServer: {
        // hot: true, // Tell the dev-server we're using HMR
        //contentBase: path.resolve(__dirname, 'dist'),
        //publicPath: '/'    //这里是重点
    }

当我这么配置

1
2
3
4
5
devServer: {
    // hot: true, // Tell the dev-server we're using HMR
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
}

再执行webpack-dev-server --hot --inline的时候就会出现正常的页面，而且支持热加载，

下面是全的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const path = require("path");
// const webpack = require('webpack');
module.exports = {
    entry:"./src/index.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    "file-loader"
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[
                    "file-loader"
                ]
            },
            {
                test:/\.(csv|tsv)$/,
                use:[
                    "csv-loader"
                ]
            },
            {
                test:/\.xml$/,
                use:[
                    "xml-loader"
                ]
            }
        ]
    },
    // plugins: [
    //     new webpack.HotModuleReplacementPlugin() // Enable HMR
    // ],
    devServer: {
        // hot: true, // Tell the dev-server we're using HMR
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'    //这里是重点
    }
};

不过我们要想执行npm start命令实现热加载还需要在webpack.config.js里面进行相关配置

自动生成index.html页面

需要使用html-webpack-plugin插件

  • 首先安装插件 npm install html-webpack-plugin --save-dev

  • 然后配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const path = require("path");
    //1.引入插件
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        entry:"./src/index.js",
        output:{
            filename:"bundle.js",
            //2.设置路径
            path:path.resolve(__dirname,"dist")
        },
        plugins: [
            //3.使用插件
            new HtmlWebpackPlugin({
                title:"我是新生成的页面"
            })
        ]
    };

  • webpack或者npm run build进行打包，index.html就会出现在dist文件夹下面。

如果想要打包两个甚至多个文件怎么办呢？

webpack.config.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path");
module.exports = {
    //1.入口文件写成对象的形式
    entry:{
      bundle:"./src/index.js",
      abc:"./src/abc.js"
    }
    output:{
  		//2.filename写活成"[name].js"的形式
        filename:"[name].js",
        path:path.resolve(__dirname,"dist")
    }
};

同样html-webpack-plugin也可以生成多个页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require("path");
//1.引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry:{
      bundle:"./src/index.js",
      abc:"./src/abc.js"
    },
    output:{
        filename:"[name].js",
        //2.设置路径
        path:path.resolve(__dirname,"dist")
    },
    plugins: [
        //3.使用插件
        new HtmlWebpackPlugin({
            title:"我是新生成的页面",
            chunks:["bundle"]
        }),
        new HtmlWebpackPlugin({
            title:"我是第二个页面"，
            filename:"index2.html",  //注意这个不写，默认是index。html
            chunks:["abc"]
        })
    ]
};

本文结束，感谢阅读。

本文作者：melody0z
本文链接：https://melodyvoid/Webpack/webpack.html
欢迎转载，转载请注明文本链接

坚持原创技术分享，您的支持将鼓励我继续创作！