一步一步教你webpack打包

miya
webpack是一个现代Javascript应用程序的模块打包器(module
bundler)它会分析目录结构,找到js模块(包括浏览器不能直接识别的代码,typescript
sass等),打包成合适的格式供浏览器访问。下面将从核心、安装、使用等方面来讲述。

一、核心

  1. 一切皆模块: 正如js文件可以是一个“模块(module)”一样,其他的(如css、image或html)文件也可视作模 块。因此,你可以require('myJSfile.js')亦可以require('myCSSfile.css')。这意味着我们可以将事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的。
  2. 按需加载: 传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。

二.安装

  • 1.安装node.js(在node官网下载即可)。
  • 2.安装webpack: npm run webpack -g(tips:可以用webpack -h来验证是否安装成功)。

图片描述

三.使用

  • 1.创建工作目录;
  • 2.npm init(创建package.json文件) 图片描述图片描述 tips:npm init了之后默认会创建一个项目依赖的package.json文件
  • 3.npm install webpack --save-dev 图片描述 tips:npm install了之后会安装一些项目依赖的包在node_modules文件夹内。
  • 4.创建一个静态页(index.html)及入口文件(app.js)
  • 5.执行命令:webpack app.js bundle.js
    图片描述
    【tips】可以看到执行该命令之后,生成了一个bundle.js文件。之后再跟大家解释文件内部关联

三.添加模块

  • 1.被引用的文件:

    module.exports='';

  • 2.引用文件:

    var module = require("./module.js")
    import module from ("./module.js")

  • 3.新建hello.js world.js;

    图片描述
    图片描述

  • 4.在app.js中引用这两个js;

    图片描述

  • 5.浏览器预览效果:

    图片描述

四.扩展

  • 每次,我们都需要指定两个文件来打包很不方便,并且每次文件有修改需要手动在重新打包也比较崩溃
    将webpack写入package.json来扩展命令直接用npm webpack即可运行命令

      --watch 自动更新
      --progress 显示打包进度
      --display-modules 列出打包模块
      --display-reasons 列出打包原因
      --p 压缩混淆脚本
    

图片描述

  • 添加完上面的配置之后,文件一有修改便可以自动更新,并且展示进度等。 当然,这里需要指定打包的入口和输出,具体的指定规则往下看~

五.核心概念

1.入口(entry) :使用哪个模块来构建内部依赖图的开始
2.输出(output) :在哪里输出它所创建的bundles及命名规则
3.loader :可以促使webpack额外地处理非javascript文件
4.插件(plugins) :执行范围更广的任务,如:打包优化和压缩等 

我们可以新建webpack.config.js来制定以上概念。接下来一项一项来解释。

  • 1entry(如下图所示,分为单入口、多入口、混合入口)

    图片描述

  • 2输出
    图片描述
    【tips】这里需要注意的用__dirname需要引用node自带的path
    图片描述
    【tips】filename中的[name]会对应入口中的path参数,没有默认是main。文件会被打包到pach+filename下。
    因为在配置文件里面已经指定了入口文件及输出,因此,我们不需要再在命令中指定入口和出口了,可以利用四中的npm run。 webpack来实验下:
    图片描述
    运行后可以看到生成了main.package.js文件,一共打包了三个文件。
    【tips】特别值得注意的是,在被打包文件最开始的位置有[0],[1],[2]的标示,这是文件的id分配,这是webpack打包的核心。我们接下来看下main.package.js文件,这里打包完的文件可以通过id值来引用对应的js文件。
    图片描述
    【添加css】接下来我们给页面添加一点样式
    图片描述

    npm run webpack之后可以发现以下报错: 图片描述
    【tips】这个是因为webpack只能处理js文件,如果需要处理css 图片等文件需要安装对应的loader

  • 3 loader(将程序资源文件进行转换,是nodejs的函数 )
    第一步:安装loader:

      npm install style-loader css-loader —save-dev npm install less-loader —save-dev       
     

    第二步:使用loader:

     1.引用模块时添加 `require("!style-loader!css-loader!./style.css")` 
     2.命令行 `webpack entry.js bundle.js --module-bind ‘css=style-loader!css-loader’`
     3.配置文件 `module:{ loaders:[ { test:/\.css$/, loaders:['style-loader','css-loader']   //loader:   'style-loader!css-loader' } ] }`  
       

    这里推荐在配置文件修改配置,就不用在文件或者命令行中指定比较方便
    图片描述
    图片描述

    常用loader

      npm install babel-loader bable-core —save-dev 
      npm install babel-preset —save-dev 
      npm install html-loader —save-dev 
      npm install file-loader —save-dev 
    
    
    

    步骤总结:

    a.安装对应loader (npm install xxx —save-dev)  
    b.修改配置文件(module) 
    
    

    常见loader配置:

    图片描述

  • 4常用插件

         webpack.BannerPlugin - banner注释 
         htmlWebpackPlugin - 关联文件 
         CommonsChunkPlugin - 按需加载 
         ExtractTextWebpackPlugin - 分离css
    
    这里需要特别提到的是关联文件的插件,在日常项目中我们一般会有模板。   

    在模板文件中,我们不需要关注css,不需要关注js,只需要写好对应的html模板。 图片描述

    4.1我们在配置文件中写好plugins, 图片描述
    4.2执行打包之后,就可以在输出文件中看到对应的js等等 图片描述
    4.3这里需要特别注意的是这个js的文件可以通过配置文件publicPath来配置。大家可以翻到最前面查看该属性。 当然了,也可以利用banner注释插件来添加注释: 图片描述

六.按需加载

  • 利用require.ensure来实现按需加载。
    图片描述
  • 在打包的时候可以看到打包了两个文件
    图片描述
  • 页面载入是是不会加载0.package.js的,只有按钮点击时才会实时去加载该js
    图片描述
阅读 82.4k

前端工程师

249 声望
8 粉丝
0 条评论

前端工程师

249 声望
8 粉丝
文章目录
宣传栏