小demo快速上手webpack_使用 webpack 实现小 demo-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39112047/article/details/123784166

前端的发展阶段

无论作为专业开发者还是接触互联网的普通人，都能体会到web前端的发展是飞速的。web从早期只来做一些表单验证和特效变得异常复杂和强大。

webpack的作用

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

webpack的核心思想就是bundle your assets

几个概念

webpack是一个静态的模块化打包工具，为现代的JS应用程序
打包bundler:webpack可以帮助我们进行打包，它是个打包工具
静态static：webpack最终打包的都是一些静态资源，就可以部署到静态服务器上面
模块化module:webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等
现代化的modern:正是因为现代前端开发面临着各种问题，才催生出了webpack的出现和发展

补充一点，webpack会将js代码与css代码打包并默认生成一个bundle.js给用户引用，我想react的all in js思想与之也有很大的关系。

安装

npm install webpack webpack-cli -g全局安装
npm install webpack webpack-cli -D局部安装

配置

笔者为以一个小demo为案例，教大家直接上手使用。
我们先新建一个项目。并cd到该目录npm init -y。

包含如下内容

const dateFormate = (date) =>{
  return "2020-12-12"
}
const priceFormate = (price)=>{
  return "100.00"
}

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce3e85410e1f43c7b11609a3c96f4787~tplv-k3u1fbpfcp-watermark.image?)
module.exports = {
  dateFormate,
  priceFormate
}

关于math

export const sum = (num1,num2) =>{
  return num1 + num2
}

index.js引入两个js文件

import {
  sum
} from './js/math'
const {
  dateFormate,
  priceFormate
} = require('./js/format')
console.log(sum(10, 20));

console.log(dateFormate("1231"));
console.log(priceFormate("1212"));

两个js采用了不同的模块化语法（es6与commonjs）。实际上，我们直接在html里引用这个index.js会报错，因为浏览器默认不支持es6的模块导入语法。而webpack就可以很好的帮助我们将这两种模块化语法让浏览器识别。

使用webpack进行打包

我们需要在package.json

在script处加入，图上的代码。
这行的代码是方便我们不用每次都输入webpack命令打包。

不过需要注意的是，我们得在项目根目录配置一个webpack.config.js文件
他里面需要指定程序的入口级出口，否则你就得build的值里加上如：webpack --entry ./src/main.js -—output-path ./build 一个出口一个入口。–后面跟着的东西叫做flag。我后面会出文章专门介绍这些概念。
关于webpack.config.js

//webpack要使用commonjs规范
const path = require('path')   
module.exports = {
  entry:'./src/index.js',  //指定打包的入口文件
  output:{
    filename:"bundle.js", //指定打包的出口文件名
    path:path.resolve(__dirname,"./build") //指定出口路径
  },
}