webpack入门笔记

Posted 2021-10-11 月岛蘑菇

使用webpack构建真实的react工程

进入项目文件夹,初始化项目

cd reaact-demo
npm init -y

安装依赖

安装react

npm install react react-dom
此时package.json中应该有react和react-dom

安装webpack

-d代表安装在开发环境中
npm install webpack webpack-cli -d

此时webpack会被安装在node_modules中
直接执行webpack会报错,需要进入node_modules文件夹中找到webpack才可以执行
也可以的通过-g的方式全局安装webpack

npm install webpack webpack-cli -g
webpack -v
出现版本号即为安装成功

初始化项目文件内容

新建src文件夹，模拟App.jsx，index.html，index.jsx子文件

<!-- index.html -->
  <div id="app"></div>

  import App from \'./App.jsx\'

// App.jsx
  import React from \'react\'
  import ReactDom from \'react-dom\'

  const App = () => {
    return (
      <div>
        <h1>webpack测试</h1>
      </div>
    )
  }

  export default App
  ReactDom.render(<App/>, document.getElementById(\'app\'))

通过webpack使用babel编译项目文件

简单地使用babel编译一个文件

安装babel

npm install @babel/core @babel/cli -d

安装babel编译规则

npm install @babel/preset-env

运行babel，编译文件，测试将ES6编译为ES5

// test.js
[1,2,3].map((item)  => {
  console.log(item)
})

运行babel命令

babel test.js --presets=@babel/preset-env
<!-- 输出结果 -->
"use strict"
[1, 2, 3].map(function (item) {
  console.log(item)
})
ES6已经转化为了ES5

配置babel的方法

可以在package.json里直接对babel进行配置
也可以在根目录新建一个.babelrc的文件
.babelrc的优先级最高，babel在编译的时候会优先查找.babelrc文件
配置内容的写法相同 都是json格式

// package.json or .babelrc
{
  "babel": {
    "presets": ["@babel/presets-env"]
    // 规则： [规则内容]
    // 指定babel编译规则
  }
}

在webpack中将babel作为laoder使用

安装需要的依赖和规则

npm install babel-loader
npm install @babel/preset-env @babel/preset-react
npm install html-webpack-plugin -d

const HtmlWebPackPlugin = require(\'html-webpack-plugin\')
const path = require(\'path\')
module.exports = {
  // 规定webpack读取文件时的后缀
  resolve: {
    extensions: [\'.wasm\', \'.mjs\', \'.js\', \'.jsx\', \'.json\']
  },
  // 入口文件
  entry: path.resolve(__dirname, \'src/index.jsx\'),
  // 编译文件
  module: {
    rules: [
      {
        // 使用正则匹配js或jsx文件
        test : /\\.jsx?/,
        // 排除node_modules文件夹
        exclude: /node_modules/,
        use: {
          loader: \'babel-loader\',
          options: {
            // 不通过babelrc
            babelrc: false,
            // 规则
            presets: [
              // 转义jsx
              require.resolve(\'@babel/preset-react\'),
              // 转义ES6
              // modules代表模块化方案的指定，是否把import作为模块编译
              [require.resolve(\'@babel/preset-env\', { modules: false })]
            ],
            // 是否将编译内容缓存
            cacheDirectory: true
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, \'src/index.html\'),
      filename: \'index.html\'
    })
  ]
}

开始打包文件

webpack --mode development
开发环境下