一步一步教你webpack打包

时间 2019-11-07 标签一步 webpack 打包

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

1、核心javascript

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

二.安装css

1.安装node.js（在node官网下载便可）。
2.安装webpack: npm run webpack -g（tips:能够用webpack -h来验证是否安装成功）。

三.使用html

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文件。以后再跟你们解释文件内部关联

三.添加模块java

1.被引用的文件：
module.exports='';node
2.引用文件：
var module = require("./module.js")
import module from ("./module.js")webpack
3.新建hello.js world.js；
4.在app.js中引用这两个js；
5.浏览器预览效果：

四.扩展web

每次，咱们都须要指定两个文件来打包很不方便，而且每次文件有修改须要手动在从新打包也比较崩溃
将webpack写入package.json来扩展命令直接用npm webpack便可运行命令typescript
```
--watch 自动更新
  --progress 显示打包进度
  --display-modules 列出打包模块
  --display-reasons 列出打包缘由
  --p 压缩混淆脚本
```

添加完上面的配置以后，文件一有修改即可以自动更新，而且展现进度等。固然，这里须要指定打包的入口和输出，具体的指定规则往下看～

五.核心概念npm

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

咱们能够新建webpack.config.js来制定以上概念。接下来一项一项来解释。json

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