脚本宝典收集整理的这篇文章主要介绍了

webpack使用笔记

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

安装

npm install -g webpack // 全局安装
npm install --save-dev webpack //本地安装

在完成全局安装和本地安装之后,就可以开始进行webpack的使用了。

尝试打包

安装完成之后,我们可以尝试使用webpack进行一次简单的打包。
webpack最基本的命令就是webpack,可以直接使用webpack命令对文件进行编译,例如

webpack main.js bundle.js

上述代码就能将main.js文件打包成bundle.js文件。

使用配置文件

也可以在webpack配置文件中设置好参数后直接运行webpack命令进行打包。在项目根目录下新建webpack.config.jswebpack会默认其为配置文件。

module.exports = {
  entry:  __dirname + "/src/main.js", //设置main.js为项目入口
  output: {
     path: __dirname + "/public",//设置public为编译后的目录
     filename: "bundle.js"//编译后输出文件的文件名
  }
}

注意:__dirname是指项目根目录,必须要加上,这样在打包之后才能准确找到相应目录。
配置好之后,在命令行中直接输入webpack就能得到前面的同样的结果。
接下来也可以在package.json文件中配置webpack命令的代替方式,如下

"scripts": {
  "start":"webpack"
}

这样直接输入 npm run start也能取得同样的效果。
如果想要执行自定义webpack的配置文件的话,可以使用如下代码

webpack --config webpack.dev.config.js

这样就能将配置文件设置为webpack.dev.config.js了。也可以在package.json中去设置

"scripts": {
  "webpack":"webpack --config webpack.dev.config.js"
}

运行 npm run webpack,就能实现和上面代码一样的功能,将配置文件设置为webpack.dev.config.js并执行。

配置文件解析

在配置文件中,entry字段可以分别设置为以下三种形式:
1.字符串
指定这个目录下的文件为入口文件

entry:'main.js' //指定main.js为入口文件

2.数组
存在多个入口文件的时候,使用数组方式可以添加多个互相不依赖的文件

entry:['src/main.js','dist/index.js']  //两个文件会被打包为一个文件

3.对象
指定多个文件打包成多个文件以供不同页面使用

{
    entry:{
        'mainEntry':'src/main.js',
        'indexEntry':'src/index.js'
    },
    output:{
        path:'/dist',
        filename:'[name].js' //执行后会打包成mainEntry.js和indexEntry两个文件
    }
}

output最常用的两个属性分别是filepathfilename
其中filepath是一个绝对路径,指定打包生成之后的文件存放的目录。fliename指定打包生成之后的文件名。
根据上述entry字段的叙述,我们有时候会同时指定多个入口文件,如果只是在output.filename中指定一个文件名,那么会将两个入口文件打包到一个文件中去。这时候我们可以使用占位符的方式来指定output.filename,这样就能根据相应的入口文件打包出相应的文件了。
占位符可以设置以下内容:

name 模板名称,对应上面的mainEntryindexEntry
hash 整体的hash值
chunkhash 分片的hash值

hash和chunkhash

为什么会有hashchunkhash值呢?其实,hash值是在整个打包过程中每一次版本变化生成的值,这样一来,一旦某一个资源文件有发生变化,则整个hash值就会发生改变,从而导致所有打包出来的文件的文件名都会发生变化。
怎样避免这个问题呢,那就是使用chunkhashchunkhash是根据具体的模块的变化来生成的值,所以某一个文件的变化只会影响到它自己的chunkhash值的变化。
例如:

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[hash].js"
    }
}

使用namehash的方式来命名打包后的文件,生成的结果如下

Hash: 8449fbacd884544a83ed
Version: webpack 2.5.1
Time: 57ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-8449fbacd884544a83ed.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-8449fbacd884544a83ed.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

两个打包之后的文件拥有同一个hash8449fbacd884544a83ed,一旦main.jsindex.js其中的一个文件发生变化,则会引起整体的hash值变化。
如果使用chunkhash的话,如果所示:

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[chunkhash].js"
    }
}

生成结果如下:

Hash: 41e84bc2e3034e423af1
Version: webpack 2.5.1
Time: 54ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-d4d7121b09d82bb73a8e.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-252220e65aed8b7f327b.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

同样也会生成hash值,但是两个文件的chunkhash值是互不影响的,其中的一个文件发生变化,则只会改变发生变化文件打包后的文件名。
看上去好像chunkhash能取代hash的作用,但是我认为hash的存在肯定有其适用的场景。比如在做静态资源大版本管理和文件夹命名的时候就能用上,肯定还会有更多其他可能的场景。

使用plugin

在使用hashchunkhash来为打包之后的文件名做版本,每次打包之后会生成新的文件名,我们无法预知每一次打包之后的文件名,所以有什么办法可以一次实现html文件中对打包文件进行引用呢?
这里我们可以使用html-webpack-plugin这个插件来帮我们完成。

  1. 在项目目录中对插件进行安装:
npm install html-webpack-plugin --save-dev
  1. 在配置文件中对插件进行引用:
var htmlWebpackPlugin = require('html-webpack-plugin')
  1. 使用并配置插件参数
    插件的使用方式是直接在配置文件中添加一个值为数组的属性:
plugins:[
  new htmlWebpackPlugin();  //不加任何参数直接新建插件对象是最基本使用方式
]

这样就能在output.path指定的目录中生成一个新的index.html文件,这个index.html文件会将所有打包完成之后的静态资源进行引用。由于每次重新打包之后的index.html文件是重新生成的,所以就解决了上面我们打包之后的静态资源文件名不断变化的问题。
由于我们没有进行任何的参数设置,所以webpack会用默认的模板打包生成一个文件,我们也可以使用自定义模板的方式进行打包生成。

new htmlWebpackPlugin({
  template:'index.html', //webpack会在根目录下寻找index.html文件作为模板
  fliename:'main.html', //还可以自定义打包生成之后的文件名
})

这样我们就能使用根目录下的index.html文件作为模板,在output.path下打包生成一个名为main.html的文件,这个文件包含了我们打包之后的静态资源文件的引用。
但是我们真实项目中不同类型的静态资源存放的目录不一样,这里其实可以在filename属性中来指定带目录的文件名。

filename:__dirname+'/dist/views/index.html'

这样我们就能将打包之后的html文件和js文件分开存放了。
另外,我们如果需要进行多页面开发的话,可以多次创建新的htmlWebpackPlugin对象来配置。大体模板如下:

new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'main.html', 
}),
new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'side.html', 
}),
...

html-webpack-plugin插件的其他配置参数和使用方法可以去官网查看。

使用loader编译ES6代码

通过使用loader,webpack能实现对各种各样的文件进行处理。
loader需要在配置文件中的modules下进行配置,主要包括以下字段:

test 一个匹配该loader所需要处理的文件拓展名的正则表达式
loader loader的名称
include/exclude 指定要处理的文件夹/屏蔽不需要处理的文件夹
query 额外选项

使用 babel

babel需要在命令行中安装单独的包

npm install --save-dev babel-core babel-loader babel-preset-es2015

以上是本地安装,需要在项目根目录下执行。
按照上面的loader配置方法,我们可以按照如下模板来配置babel

module:{
  loaders:[{
    test:/.js$/, //以.js结尾的文件都是babel需要处理的
    loader:'babel-loader', //loader的名称
    exclude:/node_modules/, //忽略node_modules目录下的所有文件
  },{} //多个loader用逗号分隔开
  ,...]
}

配置完之后在项目根目录下创建文件.babelrc,并在文件中写入以下内容:

注:在windows系统下不能直接创建.babelrc文件,可以在根目录下打开命令行输入type null>.babelrc命令创建

{ "presets": [ "es2015" ] }  

完成之后执行webpack命令,在编译js文件的时候就会使用babel-loader将文件中的ES6代码编译成浏览器可执行的ES5代码。

总结

以上是脚本宝典为你收集整理的

webpack使用笔记

全部内容,希望文章能够帮你解决

webpack使用笔记

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过