webpack入门

╰+攻爆jí腚メ 2021-08-30 23:50 519阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70][]

**一、什么是webpack？**

从上图中可以看到，webpack可以做如下的事情

*  打包所有的脚本
 *  打包所有的图片
 *  打包所有的样式

一句话：打包所有的资源。

**1、webpack安装：**

webpack是基于Node的， 在安装Webpack之前需要安装Node环境。nodejs的安装链接：[https://blog.csdn.net/liuxiao723846/article/details/48519593][https_blog.csdn.net_liuxiao723846_article_details_48519593]

注：在这里安利一个[node版本管理插件][node] `nvm`, 可以实现本地多个node 版本自由转换。（[https://github.com/creationix/nvm/blob/master/README.md][node]）

然后可以利用npm安装webpack工具，以及各种插件：（后面会一一介绍）

npm install webpack webpack-cli webpack-dev-server

**2、创建webpack项目：**

1）初始化工程：

mkdir webpack-test
    cd webpack-test
    npm init  #一路回车，然后最后输入yes即可

最终，生成了package.json文件，如下：

2）安装webpack环境：

#在webpack-test目录下执行
    npm install webpack webpack-cli --save-dev

这是会在项目目录下生成node\_modules文件夹，将相关依赖都下载到该文件夹内。此外，package.json文件也发生了变化，加入了依赖属性。

注：\--save-dev选项是指作为开发时依赖，如果是--save是指运行时依赖。前者在package.json中是devDependencies，后者是dependencies。例如，通过下面命令，安装moment库：

npm install moment

最终，package.json文件内容如下：

{
      "name": "webpack_test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "echoliu",
      "license": "ISC",
      "dependencies": {
        "moment": "^2.26.0"
      },
      "devDependencies": {
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11"
      }
    }

3）开发代码：

手动创建src目录，然后创建index.js文件（webpack4默认的入口文件是src/index.js），内容如下。当然根据业务，也可以创建各种js文件，将不同业务写入其中，但入口只能是index.js。

// index.js
    var moment = require('moment');
    console.log("Hello from JavaScript!");
    console.log(moment().startOf('day').fromNow());

这是，可以通过执行如下命令验证是否有语法错误。node src/index.js

**3、webpack构建项目：**

在 webpack 4 中，可以无须任何配置使用也就是 0配置，然而大多数项目会需要很复杂的设置，所以 webpack 仍然支持使用配置文件的方式。

3.1）零配置构建：

npx webpack

构建成功后会在项目目录下自动生成一个dist目录，同时生成构建后的js文件： main.js（默认名字），默认这个文件是压缩过的。然后，我们在dist目录下创建一个index.html文件，用来在浏览器上测试（上面在nodejs中已经测试过了index.js）：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>JavaScript Example</title>
      <script src="main.js"></script>
    </head>
    <body>
      <h1>Hello from HTML!</h1>
    </body>
    </html>

1）npx：

npm 5.2.0 版本中内置了伴生命令npx，类似于 npm 简化了项目开发中的依赖安装与管理，npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装, 这里的PATH 就是项目 node\_modules。如果npm版本较低，可以全局安装 npm install -g npx

2）不同的打包模式：

通过查看构建后的main.js文件，可以看到是压缩后的代码，这是因为 webpack 提供了不同的打包 mode：

*  npx webpack --mode production //构建用于发布的代码, 代码会压缩
 *  npx webpacck --mode development //开发过程中构建代码, 代码不压缩

3.2）配置文件构建：

在项目根目录下手动创建 webpack.config.js，内容如下：

let path = require('path');
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

然后执行npx webpack 命令执行构建。

1）filename属性：

如果想保持和源文件相同的名字则可以这样配置 '\[name\].js'；如果要加上hash值，则 '\[name\].\[hash\].js'，这时生成的js文件名中会带有一串hash值。

**4、html 文件之构建：**

上面在验证构建后js是采用的手动方式去创建 html， 并手动引入，如何使用webpack来自动构建呢？

1）下载插件：

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

2）修改webpack.config.js：

let path = require('path');
    let htmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins:[
            new htmlWebpackPlugin({
              filename: 'a.html', //构建后生成的文件的名字
              chunks: ['index'],  //构建时所用到的js源文件， 与 entry 中的 key 一一对应
              //template: './src/index.html',//所用到的html源文件，考虑到一个项目可能有多个html文件
              hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值
            })]
    }

然后执行npx webpack，就可以看到dist目录下的html文件，并且自动将js引入了进来。

**5、css 文件之构建：**

*  安装插件 npm i extract-text-webpack-plugin@next -D
 *  安装相应的css loader : npm i style-loader css-loader -D
 *  在index.js中文件引入 index.css 文件
 *  在webpack.config.js中引入插件

修改webpack.config.js:

1)style 标签载入 css文件:

plugins: [
            cssExtract,
            new HtmlWebpackPlugin()
        ],
        module: {
            rules:[
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                }
            ]
        }

2)以link方式载入css文件，也就是抽离css文件:

{
        test: /\.css$/,
        use: cssExtract.extract({
            fallback: 'style-loader',
            use: [{
                loader: 'css-loader',
            }]
        })
      }

**6、图片处理**：

html文件中引入img 标签， 这里需要用到 html-withimg-loader。首先安装插件：

npm i html-withimg-loader -D
    #i 表示install
    #-D 表示--save-dev

然后修改webpack.confg.js：

module: {
    	rules:[
    		{
    		    test: /\.(png|gif|jpg)$/,
    		    use: [{
    		        loader: 'url-loader'
    		    }]
    		},{
    		    test: /\.html/,
    		    // 处理html中的图片loader
    		    use: 'html-withimg-loader'
    		}
    	]
    }

构建后dist目录下的 html 中的 img标签：<img src="data:image/png;base64,...'/>  
当然大多数情况下，会选择将引用的图片构建在 dist/images 目录中，此时只需将上述配置稍加修改即可：

{
        test: /\.(png|gif|jpg)$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 5,   //
                outputPath: 'images/'   //构建后的目标目录
            }
        }]
    },{
        test: /\.html/,
        // 处理html中的图片loader
        use: 'html-withimg-loader'
    }

**7、本地静态服务，自动刷新：**

首先安装：

npm i webpack-dev-server -D

然后在webpack.config.js中加入：

devServer: {
            contentBase: './dist',
            host: 'localhost',
            port: 4000,
            open: true,
            hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
        }

执行 npx webpack-dev-server, 即可看到浏览器自动打开，并加装构建后的html文件。

*  那如何才能真正地自动构建，自动刷新，解放双手呢？ webpack 内置插件 HotModuleReplacementPlugin ，new webpack.HotModuleReplacementPlugin()
 *  删除构建的历史文件，可以使用 插件，clean-webpack-plugin

参考：[https://juejin.im/post/5ae919eb518825670e5cdc90][https_juejin.im_post_5ae919eb518825670e5cdc90]

最后，提出一个疑问？

我们都知道，现在可以通过npm来管理js的库了，有些js库使用npm下载到node\_modules中后，在其文件夹中会有XXX.js以及min文件夹中XXX.min.js这样的js库文件，这时就很方便我们使用原生html通过<scripts>标签引入，然后使用。

但是有的js库通过npm下载后（例如：generate-schema库，在其文件夹下只有一个bin目录，里面是一个二进制），是没有对应的js库文件的（只有源码js文件），这种我们可以在nodejs中使用，那在html中该如何使用呢？

答案：

1、在html中用script标签引入，如果该模块支持的话，或者提供专门的版本；  
2、借助Webpack或者Browserify打包后，在html中引入；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXhpYW83MjM4NDY_size_16_color_FFFFFF_t_70]: /images/20210511/9cc7b84640eb43849514042cd7a0bdda.png
[https_blog.csdn.net_liuxiao723846_article_details_48519593]: https://blog.csdn.net/liuxiao723846/article/details/48519593
[node]: https://github.com/creationix/nvm/blob/master/README.md
[https_juejin.im_post_5ae919eb518825670e5cdc90]: https://juejin.im/post/5ae919eb518825670e5cdc90