webpack的使用-基础

最新推荐文章于 2024-09-14 23:13:50 发布

原创最新推荐文章于 2024-09-14 23:13:50 发布 · 628 阅读

0 ·

CC 4.0 BY-SA版权

web前端同时被 3 个专栏收录

7 篇文章

订阅专栏

工具

2 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文介绍Webpack的基本安装与使用方法，详细解析配置文件webpack.config.js的各项参数设置，包括entry、output等核心配置，以及如何通过loaders加载不同类型的文件，并利用plugins增强功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack的使用

1. webpack的安装

npm install webpack -g
npm install webpack --save-dev

2. webpack的使用

比如有一个入口文件entry.js,我们将entry.js文件编译打包到bundle.js中,那么命令就是

    webpack entry.js bundle.js

当然我们可以将这些命令写在配置当中

3.webpack的配置文件

一般webpack的配置文件名字为webpack.config.js
配置文件的主要配置参数有：
* entry
* output
* module
* plugins

下面是一个webpack.config.js的模板

var webpack =require('webpack');
var path=require('path');
var APP_PATH=path.resolve(__dirname,'./entry.js');
var BUILD_PATH=path.resolve(__dirname);
module.exports={
    entry:APP_PATH,
    output: {
        path:   BUILD_PATH,
        filename:   'bundle.js' 
        },
        module:{
            loaders:[
                {
                    test:/\.css$/,
                    loader:'style-loader!css-loader'
                }
            ]
        },
        plugins:[
            new webpack.BannerPlugin('This file is  created by  wallowyou') 
        ],
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,

  }
}

3.1 entry

entry可以是字符串（单入口），可以是数组（多入口），但为了后续发展，请务必使用object，因为object中的key在webpack里相当于此入口的name，既可以后续用来拼生成文件的路径，也可以用来作为此入口的唯一标识。

3.2 output

output参数告诉webpack以什么方式来生成/输出文件，值得注意的是，与entry不同，output相当于一套规则，所有的入口都必须使用这一套规则，不能针对某一个特定的入口来制定output规则。output参数里有这几个子参数是比较常用的：path、publicPath、filename、chunkFilename

path

path参数表示生成文件的根目录，需要传入一个绝对路径。path参数和后面的filename参数共同组成入口文件的完整路径。

publicPath

publicPath参数跟path参数的区别是：path参数其实是针对本地文件系统的，而publicPath则针对的是浏览器；因此，publicPath既可以是一个相对路径，如示例中的’../../../../build/’，也可以是一个绝对路径如http://www.xxxxx.com/。

filename

filename属性表示的是如何命名生成出来的入口文件

[name]，指代入口文件的name，也就是上面提到的entry参数的key，因此，我们可以在name里利用/，即可达到控制文件目录结构的效果。
[hash]，指代本次编译的一个hash版本，值得注意的是，只要是在同一次编译过程中生成的文件，这个[hash]的值就是一样的；在缓存的层面来说，相当于一次全量的替换。
[chunkhash]，指代的是当前chunk的一个hash版本，也就是说，在同一次编译中，每一个chunk的hash都是不一样的；而在两次编译中，如果某个chunk根本没有发生变化，那么该chunk的hash也就不会发生变化。这在缓存的层面上来说，就是把缓存的粒度精细到具体某个chunk，只要chunk不变，该chunk的浏览器缓存就可以继续使用。

3.3 各种Loader配置：module参数

module参数有几个子参数，但是最常用的自然还是loaders子参数,例子

module:{ 
loaders:[
      {
        // "test" is commonly used to match the file extension
        test: /\.jsx$/,

        // "include" is commonly used to match the directories
        include: [
          path.resolve(__dirname, "app/src"),
          path.resolve(__dirname, "app/test")
        ],

        // "exclude" should be used to exclude exceptions
        // try to prefer "include" when possible

        // the "loader"
        loader: "babel-loader"
      }
    ]
}

test参数用来指示当前配置项针对哪些资源，该值应是一个条件值(condition)。
exclude参数用来剔除掉需要忽略的资源，该值应是一个条件值(condition)。
include参数用来表示本loader配置仅针对哪些目录/文件，该值应是一个条件值(condition)。这个参数跟test参数的效果是一样的（官方文档也是这么写的），我也不明白为嘛有俩同样规则的参数，不过我们姑且可以自己来划分这两者的用途：test参数用来指示文件名（包括文件后缀），而include参数则用来指示目录；注意同时使用这两者的时候，实际上是and的关系。
loader/loaders参数，用来指示用哪个/哪些loader来处理目标资源，这俩货表达的其实是一个意思，只是写法不一样，我个人推荐用loader写成一行，多个loader间使用!分割，这种形式类似于管道的概念，又或者说是函数式编程。形如loader: ‘css?!postcss!less’，可以很明显地看出，目标资源先经less-loader处理过后将结果交给postcss-loader作进一步处理，然后最后再交给css-loader。

3.4 添加额外功能：plugins参数

这plugins参数相当于一个插槽位（类型是数组），你可以先按某个plugin要求的方式初始化好了以后，把初始化后的实例丢到这里来。
例子：

 plugins:[
            new webpack.BannerPlugin('This file is  created by  wallowyou') ,

        ],

3.5 webpack-dev-server

配置webpack-dev-server可以实现自动刷新浏览器和编译。

 devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,

  }

注意在package.json的script中要配置webpack-dev-server –hot