欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack的使用-基础

程序员文章站 2022-07-12 21:08:51
...

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