webpack的详细使用

时间 2019-12-12

标签 webpack 详细使用繁體版

原文原文链接

webpack做用：

打包（能够将多个文件打包成一个文件，能够下降访问次数，减轻服务器的压力）。
转换（sass, less,typescript,es6,jsx）对于浏览器不兼容的作转换。
优化（单页面应用愈来愈普及，前端的逻辑愈来愈复杂）。

webpack安装：

全局javascript

npm install -g webpack
     若是你使用的是 webpack 4+ 版本你还须要安装 cli 
     npm install -g webpack-cli
复制代码

安装成功后查看版本号css

webpack -v
复制代码

本地安装html

npm install --save-dev webpack
     若是你使用 webpack 4+ 版本，你还须要安装 CLI
     npm install --save-dev webpack-cli
复制代码

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，而且在使用不一样的 webpack 版本的项目中，可能会致使构建失败。前端

webpack的结构

webpack须要传入一个配置对象，它的主要结构有：vue

mode : 模式。模式分为两种：（1）生产模式（production）,该模式的代码是压缩之后的，供上线使用。（2）开发模式（development）,该模式的代码没有进行压缩，供开发使用。java
entry : 入口 --》表示我要将谁进行打包。node
output : 出口 --》表示将打包后的文件放到哪里。webpack
devServer : 服务器设置 --》热更新，服务器代理，自动打开浏览器。es6
plugins : 插件。web
loader是：转换。实现兼容，sass 、less 、jsx。

在学习 webpack 如何打包以前，首先要学习下 Node.js 的一个内置模块 path 和 __dirname 这个全局变量

__dirname 获取所处文件的所在目录（绝对路径）

console.log（__dirname） 
      // Users/bu/Desktop/learn/webpack/src
复制代码

path 模块是 node.js 的一个内置模块，与 __dirname 能够防止不一样操做系统之间的文件路径问题

// path.join() 用于将两个地址进行合并，生成一个绝对地址
     console.log(path.join(__dirname,"dist"));
     console.log(path.join(__dirname,"./dist"));
     console.log(path.join(__dirname,"../dist"));
     console.log(path.join(__dirname,"/dist"));
     
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/dist
     /Users/bu/Desktop/learn/webpack/src/dist

     // path.resolve() 与 path.join() 其余都同样，路径合并， 可是只有一个 “/” 则认为进入到盘符下面 
     console.log(path.resolve(__dirname,'dist'));
     console.log(path.resolve(__dirname,'./dist'));
     console.log(path.resolve(__dirname,'../dist'));
     console.log(path.resolve(__dirname,'/dist'));
     
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/src/dist
     /Users/bu/Desktop/learn/webpack/dist
     /dist
复制代码

打包 ( 同名文件会进行覆盖 )

零配置打包：你不须要进行配置，只须要命令行输入 webpack 就会进行打包

没有进行任何配置，自动将 src 文件下的 index.js 文件，打包到 dist 下的main.js 里面
初次打包： webpack ./src/index.js --output ./dist/bundle.js --mode development // 表示将src文件中的index文件打包到 dist 文件中的bundle文件中，模式为开发模式 // --mode 为可选不写则默认为生产模式
在package.json 文件中进行配置，使用 npm run + "你设置的指令名称" 进行打包

注意：使用 npm init 能够便捷的建立 package.json 文件
```
"scripts": {
    "build" : "webpack ./src/index.js --output ./dist/bundle.js --mode production"
  }
复制代码
```
可是为了不将全部的配置都写在package.json 中，因此添加一个 webpack.config.js 文件进行配置，而后使用指令 "webpack" 进行触发配置。固然webpack的配置文件也能够不叫 webpack.config.js ,能够本身命名如： buzhanhua.config.js 。可是触发指令则变为：

webpack --config buzhahua.config.js
```
const path = require('path');
  module.exports = {
      mode : "development",
      entry : "./src/index.js",
      output : {
      path : path.resolve(__dirname,'./dist'), // path 必须是一个绝对路径 若使用 "/" 则打包到盘符底下
      filename : 'bundle.js'
  }
  }
复制代码
```

如何将多个文件打包到一个文件中？

const path = require('path');
     module.exports = {
         mode : "development",
         entry : [   //  以数组的形式
              "./src/index.js",
              "./src/index1.js"
         ],
         output : {
              path : path.resolve(__dirname,'./dist'),
             filename : 'bundle.js'
         }
     }
复制代码

如何将多个文件打包到多个文件中？

const path = require('path');
     module.exports = {
          mode : "development",
          entry : {    // 以对象的形式
               index : './src/index.js',
               index1 : './src/index1.js'
             },
         output : {
             path : path.resolve(__dirname,'./dist'),
             filename : '[name].bundle.js'  // name 接收 entry 中的key 做为文件名的前缀 ，进行分文件
             }
        }
复制代码

plugins : 插件

一. html-webpack-plugin : 以某个页面为模板，在内存中生成HTML页面的插件（也能够理解为：实现对HTML的一些控制，将指定的JS放进HTML当中）。

使用：

下载：

npm install html-webpack-plugin webpack webpack-cli --save-dev
顺便说一下 --save-dev 也能够换成 -D

引入：

const HTMLWebpackPlugin = require("html-webpack-plugin")
复制代码

使用：

plugins : [
      new HTMLWebpackPlugin()
  ]
复制代码

用法
```
plugins : [
         new HTMLWebpackPlugin({
              template : './src/test.html',
              filename : 'haha.html',
              title : "我是主页谢谢",
              arr : [1,2,3,4],
              chunks : ["index"]
       }),
         new HTMLWebpackPlugin({
              minify : {
                   collapseWhitespace : true, // 压缩空白
                   removeAttributeQuotes : true // 删除属性双引号
               },
              template : './src/test1.html',
              chunks : ["index1"],
               hash : true
      })
      ]
复制代码
```
属性注释：

template : "模板的路径即便用谁作模板" ，注意这里只是指定谁是模板，生成文件的名字与其无关，若是不定义filename 则生成文件的名字默认是 index.html

filename : 指定打包完的文件名称（生成文件的名称）

chunks : 用于设置打包完的JS是否进行嵌入，chunks 接收一个数组，能够嵌入多个，对应的成员是entry的key 值。若不想嵌入则 [""] 便可

minify : 压缩

hash : 清缓存，就是在嵌入的js路径后追加一个后缀，保证惟一性
```
<script type=text/javascript src=index.bundle.js?36c17b8a44d43558e6da></script>
复制代码
```
而对于，title ,arr等则是本身定义的一些数据，能够在模板中使用
```
<!DOCTYPE html>
      <html lang="en">
          <head>
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <meta http-equiv="X-UA-Compatible" content="ie=edge">
               <title><%=htmlWebpackPlugin.options.title%></title>
          </head>
      <body>
           <% for(var i = 0 ; i < htmlWebpackPlugin.options.arr.length ; i++){%>
               <p><%=htmlWebpackPlugin.options.arr[i]%></p>
           <%}%>
      </body>
      </html>
复制代码
```
如同百度模板同样 <% %> 至关于开辟出一块js 空间可写js代码，<%=%> 则是使用数据，注意在使用数据时从 htmlWebpackPlugin.options 中获取

二、clean-webpack-plugin : 删除指定的文件夹，多用于在打包以前将某个文件夹删除
1. 下载
  
  npm install clean-webpack-plugin -D
2. 引入
  
  const CleanWebpackPlugin = require("clean-webpack-plugin")
3. 使用
  
  plugins : [ new CleanWebpackPlugin(['dist']) ]
  
  注意：要将它放到全部操做以前，表示在打包以前将dist 文件删除，如果放在最后则会将打包后的文件给删掉了

devServer : 服务器（对象）

下载

npm install webpack-dev-server -D

webpack.config.js 中配置

devServer : {
          contentBase : path.join(__dirname,'./dist'), // 设置网站根目录
          host : "localhost", // 端口
          port : 8000, // 端口号
          open :true // 是否自动开启
  },
复制代码

package.json 中配置
```
"script" : {
      "dev" : "webpack-dev-server --open"
  }
复制代码
```
注意：在指令后添加 --open 可使其自动开启，webpack.config.js中设置这里就不须要设置了，有一个就能够

loader 转换

注意：webpack默认只能处理JS类型的文件，对于其余文件则须要使用第三方包（loader）进行转化

执行过程以下：

发现要处理的文件不是JS，就会去配置文件中找对应的loader。
若是能够匹配对应的规则，则会调用对应的loader进行处理。
调用顺序，从后向前，每一个loader的处理解果会向后面的loader进行传递。
当最后一个loader调用完毕，将最终结果交给webpack进行打包，最终输出到打包文件。

配置方式：

// 在webpack配置文件中
     module : {
         rules : [
             {
                  test : /\.css$/,
                  use : ['style-loader','css-loader']
             },
         ]
        }
复制代码

处理css文件

安装

npm install style-loader css-loader -D

配置

{test : /.css$/,use : ['style-loader','css-loader']}

处理less文件

安装

npm install style-loader css-loader less-loader less(该报是less-loader 内部依赖不须要use中使用) -D

配置

{ test : /.less$/, use : ['style-loader','css-loader','less-loader']}

处理sass文件

安装

npm install style-loader css-loader sass-loader node-sass(该报是sass-loader 内部依赖不须要use中使用) -D

配置

{ test : /.scss$/, use : ['style-loader','css-loader','sass-loader']}

处理图片

安装

npm install url-loader file-loader(内部依赖) -D

配置

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=90000&name=[hash:8]-[name].[ext]'}

注意：

给loader传参的时候和URL彻底同样， limit 的单位是字节 byte 大于或等于这个值的时候，将不会将图片转为base64 小于的时候则会转为 base64（提升页面加载速度的方式之一就是减小页面的二次请求数量，）。
name字段能够定义输出的图片名称，默认会将名称设置为hash值，这么作的目的是为了防止图片名称重复（由于都会将图片托管到根目录）。

处理字体

安装

npm install url-loader file-loader(内部依赖) -D

配置

{test:/.(ttf|eot|svg|woff|woff2)$/,use : 'url-loader'}

babel转换es6以上的语法

安装

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

注释： "babel-plugin-" 后是插件的名称， "babel-preset-" 后是语法名称

配置

在modele节点中的rules数组中，添加一条新的匹配规则

{
            test : /\.js$/,
            use : 'babel-loader',
            exclude : /node_modules/
        }
复制代码

exclude表示排除的意思，排除node_modules的缘由以下：

不排除node_modules,babel则会将node_modules中的全部第三方JS文件进行翻译打包，第三方包确定都是编译好的，这样作的是无用功。而且这样会很是消耗CPU，同时打包速度很是慢。
不排除就算打包完成了，项目也是没法运行的。

配置babel

在项目的根目录下创建一个.babelrc 文件，该文件中必须严格符合JSON语法。

{
          "presets": ["env","stage-0"],
          "plugins": ["transform-runtime"]
     }
复制代码

presets 中放置语法， plugins 放置插件

resolve 更改引入包的默认路径

import Vue from 'vue';

包查找规则：

找寻项目中有没有node_modules 文件夹。
在node_modules中根据包名找到对应文件。
在该文件中找到该包的包配置文件package.json
package.json 文件中的main属性指定了该包被加载时候的入口文件。

下面有两种方式改变：

1、更改引入方式

import Vue from '../node_modules/vue/dist/vue';

2、更改webpack配置

在webpack配置对象中添加新的节点resolve , 以下：

resolve : {
         alias : {
             "vue$":"vue/dist/vue.js"
      }
     }
复制代码

表示以vue结尾的引入时，在后面的路径文件中引入