js逆向 webpack_一：webpack的基础使用

一：webpack是什么

webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。webpack的核心是一个用于现代JavaScript应用程序的静态模块打包器。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，该图可以映射项目需要的每个模块并生成一个或多个包。

二：webpack有哪些重要特征

1. 插件化：webpack本身非常灵活，提供了丰富的插件接口。基于这些接口，webpack开发了很多插件作为内置功能。

2. 速度快：webpack使用异步IO以及多级缓存机制。所以webpack的速度是很快的，尤其是增量更新。

3. 丰富的Loaders：loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。

4. 高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。

5. 开发模式友好：webpack为开发模式也提供了很多辅助功能。比如SourceMap、热更新等。

6. 优化：webpack提供了很多优化机制来减少打包输出的文件大小，不仅如此，它还提供了hash机制，来解决浏览器缓存问题。

7. 使用场景多：webpack不仅适用于web应用场景，也适用于Webworkers、Node.js场景

三：webpack安装

1. webpack是基于nodejs环境，首先安装node。

2. 使用npm进行全局安装：npm install -g webpack

查看版本webpack -v

不执行。

原因：webpack4把cli和webpack分割开了，必须下载webpack-cli。

3. 使用npm进行全局安装：npm install -g webpack-cli。

四：简单实用

1. 新建一个文件夹myproject

2. 在文件夹myproject使用终端进行npm init初始化，产生一个package.json文件

3. 在文件夹myproject中新建 webpack.config.js用于配置

。

4. index.html文件

，main.js文件

，sum.js文件

。

5. 未配置webpack.config.js时. webpack  ./js/main.js(入口文件) -o ./bundle.js(打包文件的存放文件夹和文件名)。注：中间加-o指定打包文件

五：配置webpack.config.js

1. 入口文件，默认情况下，它的值是./src/index.js，但是您可以通过在webpack.config.js中entry属性来指定不同的(或多个入口点)，

module.exports = {

entry: './path/to/my/entry/file.js'

};

2. 输出文件，可以通过output在您的配置中指定一个字段来配置此过程的这一部分：

const path=require('path');

module.exports={

entry:'./path/to/my/entry/file.js',

output:{

path: path.resolve(__dirname,'dist'),

filename:'my-first-webpack.bundle.js'

}

};

3. 在终端中输入webpack --config webpack.config.js即可

五：配置package.json快捷打包

1. script中添加

"scripts": {

"dev": "webpack--mode development"，//开发环境

"build": "webpack  --mode production"，//开发环境

},

--mode development指定打包模式

2. 不指定直接打包默认开发环境打包代码压缩一行。