webpack和babel的使用和配置

webpack和babel

ES6 模块化，浏览器暂不支持
ES6 语法，浏览器并不完全支持
压缩代码，整合代码，以让网页加载更快

搭建webpack 并添加 babel

npm init -y

npm install webpack webpack-cli -D

npm install html-webpack-plugin -D

npm install webpack-dev-server -D 

npm install @babel/core @babel/preset-env babel-loader -D

在现有的目录中新建一个webpack.config.js文件 该文件是webpack的默认配置文件 增加如下配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'development', //开发环境
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  //配置babel
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  //解析html
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),
      filename: 'index.html'
    })
  ],
  //启动本地服务配置
  devServer: {
    port: 3000,
    static: path.join(__dirname, 'dist')
  }
}

新建一个.babelrc文件 指定babel配置

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

新建并配置生产环境文件 webpack.prod.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'production', //生产环境
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.join(__dirname, 'dist')
  },
  //配置babel
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src'),
        exclude: /node_modules/
      }
    ]
  },
  //解析html
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),
      filename: 'index.html'
    })
  ]
}

修改package.json文件的scripts对象里面的：“build”: “webpack --config webpack.prod.js”,build打包命令指向webpack.prod.js文件

{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "babel-loader": "^10.0.0",
    "html-webpack-plugin": "^5.6.3",
    "webpack": "^5.99.6",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.1"
  }
}

执行npm run build 命令会生成打包后dist文件夹

模块导入与导出
新增一个a.js文件 写点代码

/**
 *
 * export  分别暴露导出变量 函数 对象
 * @export
 */
export function fn() {
  console.log('fn')
}
export const name = 'a'
export const obj = {
  name: 'zhangsan'
}

在index.js引入并使用

//解构赋值
import { fn, name, obj } from './a'
fn()
console.log(name)
console.log(obj)

新增一个b.js文件 写点代码

// 统一暴露导出变量 函数 对象
function fn() {
  console.log('fn')
}
const name = 'b'
const obj = {
  name: 'zhangsan'
}
export { fn, name, obj }

在index.js引入并使用

//解构赋值
import { fn, name, obj } from './b'
fn()
console.log(name)
console.log(obj)

新增一个c.js文件 写点代码

//只导出一个 export default
const xxx = {
  name: 'xxx'
}
export default xxx

在index.js引入并使用

import xxx from './c'
console.log(xxx, 'xxx')