vue学习基础之webpack

vue学习基础之webpack

webpack的安装方式

全局安装：npm install webpack -g
项目安装：npm install webpack --save-dev

webpack构建的过程

• 1. webpack .\src\main.js .\dist\bundle.js (不推荐使用)，bundle.js文件是构建后的，可以直接在页面中引用。

• 2. 通过webpack命令，然后配置webpack.config.js的方式

     自动编译生成的文件可以通过配置直接打包编译并保存到项目的指定目录中
     直接通过webpack命令进行构建的时候，会通过根目录下面的webpack.config.js配置文件中获取构建的相关信息

• 3. 使用webpack-dev-server工具，实现自动打包编译功能

     npm install webpack-dev-server -D -D是开发环境
     安装完成之后，和webpack的用法完全一样
     由于是在开发环境（本地）安装的webpack-dev-server，所以，无法直接在命令行中使用，只有安装到全局的（-g）才能直接在终端中使用

     注意： 如果webpack-dev-server工具想要正常运行，需要在本地种安装webpack

     webpack-dev-server 帮我们打包生成的bundle.js并没有存放到物理磁盘上，而是直接托管到了电脑的内存中，所以我们在项目的根目录中找不到该文件（<script src="/bundle.js"></script>）。
     可以认为webpack-dev-server 把打包好的文件以一种虚拟的方式托管到项目的根目录中，虽然看不到，但是可以认为和dist，src目录平级。

• 4. webpack-dev-server 的命令参数： --open --port 8081 --contentBase src --hot

     –open 启动直接打开浏览器
     –port 8081 指定端口
     –contentBase src 指定根项目根目录
     –hot 热更新

• 5. html-webpack-plugin插件。
     npm install html-webpack-plugin -D 。 可以将页面生成到内存中

     作用1：自动在内存中根据指定的页面生成一个内存页面
     作用2：自动把打包好的js文件（bundle.js）追加到页面中

上述构建配置文件(webpack.config.js)代码如下：

/* jshint esversion: 6 */

const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
   entry: path.join(__dirname, "./src/main.js"),
   output: {
       path: path.join(__dirname, "./dist"),
       filename: "bundle.js"
   },
   devServer: {
       open: true,
       port: 8081,
       contentBase: 'src',
       hot: true
   },
   plugins: [ // 配置插件
       new webpack.HotModuleReplacementPlugin(), // devServer中的hot设置为true的时候，需要配置此插件
       new htmlWebpackPlugin({ // 创建一个在内存中生成html页面的插件
           template: path.join(__dirname, "./src/index.html"),
           filename: "index.html"
       })
   ],
   module: {
       rules: [

       ]
   }

};

webpack加载第三方模块(loader)

• 导入css文件。webpack默认只能打包处理js类型的文件，无法处理其他非js类型的文件，如果要处理非js类型的文件，需要安装合适的第三方的加载器(loader)

  如果要打包处理css文件，需要安装 npm install style-loader css-loader -D 工具
  打开webpack.config.js文件，新增一个配置节点，叫做module，他是一个对象，在这个对象上有一个rules属性，这个rules属性是一个数组，这个数组中存放了所有第三方文件的匹配和处理规则

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

• less加载器

  首先安装： npm install less-loader -D， 在安装less： npm install less -D

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

• scss加载器

  首先安装： npm install sass-loader -D， 然后安装node-sass: cnpm install node-sass -D
  这里用npm不好安装，所以用cnpm

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

• url-loader

  默认情况下， webpack是无法处理css文件中的url地址的，不管是图片还是字体库，只要是url地址都无法处理。
  需要第三方的loader来处理。安装命令： cnpm install url-loader file-loader -D，然后配置module

  {
      test: /\.(jpg|png|gif)$/,
      use: [{
          loader: 'url-loader',
          options: {
              limit: 8192 // limit参数表示在解析url指定的图片文件的时候，是否转换为base64格式，超过的不转换
          }
      }, ]
  }, {
      test: /\.(tff|eot|svg|woff|woff2)$/,
      use: 'url-loader'
  }
  

• webpack处理第三方模块的过程：

  1. 如果发现要处理的文件不是js文件，然后就去配置文件（webpack.config.js）中寻找module中rules规则。（loader规则）
  2. 如果能找到对应的规则，就会调用对应的规则（loader）处理这种文件类型
  3. 在调用loader的时候，是从rules的数组中从后往前调用，后一个调用完成之后再交给前一个loader进行处理
  4. 当前最后一个loader调用完毕之后，会把处理的结果交给webpack，打包合并输出。

webpack处理ES6语法

在webpack中只能处理一部分ES6的语法，一些更高级ES6或者ES7语法，webpack是无法处理的。这时候就需要借助于第三方的loader来帮组webpack处理这些高级的语法，当第三方loader把高级的语法转换为低级的语法之后会交给webpack打包。通过babel可以帮助把高级的语法转换为低级的语法。

包安装:

第一套包： cnpm install babel-core babel-loader babel-plugin-transform-runtime -D
第二套包： cnpm install babel-preset-env babel-preset-stage-0 -D
说明：第一套包为babel的转换工具，第二套包为babel的语法，第一套包只负责转换，是转换器，但不知道对应关系，第二套包只负责对应关系！

注意：直接采用上述方法安装会出现问题，具体方案参见下方的问题

配置:

第一步： 打开webpack.config.js文件，在module节点下的rules中添加一个新的匹配规则：`{ test: /.js$/, use: ‘babel-loader’ , exclude: /node_modules/ }

注意：在配置babel的loader的时候，必须吧node_modules目录通过exclude选项排除。如果不排除，则babel会把node_modules中所有的js文件都打包编译，这样会非常消耗资源，打包非常慢。另一方面，即便是转换了node_modules中的js文件，项目也无法运行。

第二步： 在项目的根目录中新建 .babelrc 的配置文件，这个配置文件属于JSON格式，所以在配置的时候，必须遵守JSON的语法规范。比如说，不能写注释。

第三步： 在.babelrc中配置如下：（presets：语法）

{
    "presets": ['env', 'stage-0'],
    "plugins": ['transform-runtime'] 
}

问题

测试的时候直接通过上述命令安装获取的版本号：
“babel-core”: “^6.26.3”,
“babel-loader”: “^8.0.6”,
实际未通过测试！！
并且在安装的时候出现以下警告：

npm WARN babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 but none is installed.

babel-loader@8.x是webpack用于Babel 7.x的一个整合loader模块，Babel 7.x已经把所有的相关的包从babel-迁移到了@babel的npm环境仓库。
所以上述警告是合适的，你可以通过使用@babel/core代替babel-core来安装:

npm i @babel/core -D

总结如下：

• 如果你希望安装Babel 6.x，你可以使用下面的命令：

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

• 如果你想使用Babel 7，理论上你可以使用下面的命令安装：

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