Skip to main content

基本使用

1、申请AppID#

1.1、环境参数#

（1）、Nodejs版本10以上

注意webpack依赖nodejs，安装webpack之前先安装nodejs；webpack相当于nodejs的第三方模块，也需要通过nodejs的npm安装

（2）、Webpack版本4.26以上

1.2、预备技能#

（1）、基本的Nodejs知识 （2）、基本的npm指令 （3）、熟悉ES6语法

2、WebPack五大核心概念#

入口(entry) 指示webpack以那个文件为入口文件开始打包

输出(output)指示webpack打包后的资源bundles输出位置及名称

loader使webpack能够处理非js文件（webpack 只能理解 JavaScript 和 JSON 文件所以需要借助loader）

插件(plugin)插件可以使webpack执行范围更广的任务，打包优化压缩等

模式(mode)通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中,但是他们更加强调的是前端流程自动化（构建自动化任务），模块化并不是他们的核心；
webpack强调的是模块话开发管理，可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。

3、起步#

3.1、安装#

首先我们创建项目目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

本地安装

# 初始化npm包描述文件npm init -y
#在本地安装 webpack 和 webpack-cli 并安装为开发依赖npm install webpack webpack-cli --save-dev
注意如果只在本地安装了webpack webpack-cli 那么运行cli命令时要用npx即npx webpack 想要解决的主要问题就是调用项目内部安装的模块。
不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。

全局安装 不推荐

#全局安装 webpack 和 webpack-clinpm install webpack webpack-cli -g

3.2、创建目录结构#

（1）、初始化之后在项目文件夹下创建如下目录结构

项目文件夹  |- package.json+ |- index.html+ |- /dist+ |- /src+   |- index.js

3.3、创建一个bundle（打包）#

(1)、在项目根目录下打开命令行工具通过webpack命令打包

  • ① 默认打包(会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出)

    #全局安装了webpack webpack-cli直接用此命令webpack
#本地安装webpack webpack-cli需要通过npxnpx webpack

  • ② 指定入口输出和模式打包(将指定文件通过指定模式打包输出到指定文件夹)

    # 注意：如果时是本地安装webpack webpack-cli需要通过npx webpack
# 开发环境webpack ./src/index.js -o ./dist/main.js --mode=development# 生产环境webpack ./src/index.js -o ./dist/main.js --mode=production

(2)、最后在dist文件夹下会生成一个main.js(该文件包含了index.js中所有模块依赖关系)

(3)、再在项目根目录下的index.html文件中引入main.js然后在浏览器中打开该html文件

4、webpack配置文件#

（1）、项目根目录下创建 webpack.config.js文件即webpack的配置文件（该配置文件作用：指示webpack做什么；当运行webpack 的指令时就会加载里面的配置）

项目文件夹  |- package.json  |- index.html  |- /dist  |- /src    |- index.js+ |- webpack.config.js

（2）、webpack构建工具是基于nodejs平台所以采用的是nodejs的commonJS 模块化规范，webpack.config.js要使用commonJS规范

（3）、项目中源代码采用的是js自己的ES6 modules模块化规范注意区分

4.1、配置入口输出和打包模式#

webpack.config.js配置文件

const path = require('path');//引入nodejs的路径处理系统模块module.exports={   //打包模式    mode: "production", // "production" | "development" | "none"    //入口起点    entry: './src/index.js',    //输出位置和名称    output: {        //输出文件名        filename: 'bundle.js',        //输出位置        path: path.resolve(__dirname, 'dist'),    },    module:{      rules:[        //loader配置      ]    },    plagins:[      //插件配置    ]}

4.2、根据配置文件打包#

在配置文件中配置了入口和输出后的打包命令后 直接输入webpack 或 npx webpack就行（会自动找到当前项目下的webpack.config.js配置文件中配置的参数进行打包）

#全局安装了webpack webpack-cli直接用此命令webpack  #本地安装webpack webpack-cli需要通过npxnpx webpack

5、配置npm scripts脚本打包#

（1）、配置打包脚本 在项目package.json文件中配置如下脚本来执行webpack的打包命令

package.json打开package.json文件找到"script"属性在该属性下配置
"script":{    "build":"webpack"}

（2）、执行打包脚本 npm run 项目文件夹下package.json文件中 script下配置的脚本来执行命令

npm run build
注意npm run build 命令可以替代我们之前使用的 npx 命令。使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。
文章目录