webpack用法

前言：

webpack :   类似于  gulp

中文文档   http://webpackdoc.com/
英文文档   https://webpack.js.org/

一、什么是webpack?

Webpack 是当下最热门的前端资源模块化管理和打包工具。

二、webpack 有什么作用 ?

(1) 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

(2) 将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

(3) 而且在使用了各种插件之后，还能打包css文件，图片文件，甚至是html和txt文件。

(4) 在使用了特殊的插件之后，还能打包一些框架独有的文件，例如vue的.vue文件，react的jsx文件。

(5) 使用了插件之后，还能实现代码压缩，代码检查等功能。

三、webpack安装

全局下载webpack和webpack-cli

npm install webpack@5.0.0 -g 

npm install webpack-cli@3.3.12 -g   

安装之后,执行webpack -v 显示webpack版本号, 如果只显示一个版本号,表示正常。

如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。

如果连webpack-cli一起显示, 则不正常,表示webpack和webpack-cli版本不匹配, 需要安装指定版本的webpack和cli。

四、webpack使用

(1)直接打包一个js文件

webpack a.js   
对a.js文件打包, 默认打包在 dist/main.js文件中

(2)也可以指定打包的目标路径

webpack xxxx.js -o yyyy.js
对xxxx.js进行打包，生成的文件命名为yyyy.js

(3)可以把多个文件打包到一起

webpack a.js b.js c.js -o x.js
把a.js , b.js, 和 c.js中的代码打包到一起,写入x.js中

(4)如果需要对多个js文件打包，而且还要使用webpack打包其他文件（例如css,图片文件），则必须使用webpack的配置文件进行具体的打包设置。
使用webpack配置文件打包,  步骤:

① 创建打包配置文件 webpack.config.js 
② 在配置文件中写打包配置
③ 在终端执行指令webpack开始打包

配置文件：

module.exports = {
    entry: "./a.js",
    output: {
        path: __dirname,
        filename: "index.js"
    },
    mode: 'development'
}

使用ES6模块化的代码，可以使用webpack进行打包，打包之后的js文件可以在任何环境中运行。