webpack的介绍以及使用

学习目标

使用webpack构建React项目运行环境

webpack介绍

项目开发打包工具 文档

1. 模块化、组件化开发 —-webpack—-代码整合
2. 高级语法（ES6语法、React语法）—-webpack—-浏览器可以识别的语法
3. 提供比较方便的开发环境

webpack打包基本流程

1. 不使用webpack的时候

类似模块化这种新语法，浏览器无法直接识别

使用webpack流程

1. npm init
2. cnpm i webpack webpack-cli -D
3. 在项目根目录下新建webpack.config.js配置文件

var path = require('path')
module.exports = {
  entry:'./app.js', //被打包入口文件
  output:{ //打包结果输出相关配置
    path:path.resolve(__dirname,'dist'), //目录位置
    filename:'boundle.js' //文件名
  }
}

1. 在package.json中新增npm命令

 "scripts": {
    "build":"webpack --config webpack.config.js"
  },

1. 执行打包命令，查看打包结果

npm run build

webpack的插件机制

自动生成html文件，并引入使用打包后的js文件

1. 插件来源

• 官方插件
• npm平台插件

1. html-webpack-plugin插件的使用
   文档

• npm install —save-dev html-webpack-plugin
• 在webpack.config.js中进行插件配置

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')
module.exports = {
  entry:'./app.js', //被打包入口文件
  output:{ //打包结果输出相关配置
    path:path.resolve(__dirname,'dist'), //目录位置
    filename:'index.js' //文件名
  },
  plugins:[ //插件配置
    new HtmlWebpackPlugin({ //特定插件的调用与配置
      filename:'abc.html',
      template:'public/index.html'
    })
  ]
}

1. 其他插件的使用流程

Loader

webpack本身并不能识别所有的前端新语法，需要借助Loader进行编译 例如：React项目中JSX语法

1. 不借助Loader直接打包React代码
   报错信息

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file.
|
| ReactDOM.render(
>   <h1>这是React代码</h1>,
|   document.getElementById('app')
| )

1. loader选择

babel的作用，Babel 是一个 JavaScript 编译器
将ES8语法—-babel编译—-ES5语法——浏览器运行
babel

预设(preset)：预先设定的语法规则包
React语法—-react预设—-ES5语法

Babel的使用

1. 安装babel依赖

npm install --save-dev babel-loader @babel/core

1. 在webpack.config.js中新增loader相关配置

...其他配置
module: {
  rules: [
    { 
      test: /\.js$/,  //需要被当前loader编译的文件类型
      exclude: /node_modules/,  //排除不需要编译的文件
      loader: "babel-loader"  //使用哪种loader进行编译
    }
  ]
}
...其他配置

1. 按需安装响应的预设presets

此处需要安装react预设

npm install --save-dev @babel/preset-react

1. 在项目根目录下，新建.babelrc文件,并为babel配置react预设

{
  "presets": ["@babel/preset-react"]
}

1. 执行打包命令，预览效果

npm run build