webpack

Posted 2020-08-21 筱qian

参考自 https://segmentfault.com/a/1190000006178770

Webpack可以看作是模块打包工具：所做的事情就是：分析项目结构，找到javascript模块及其他浏览器不能直接运行的扩展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。

Webpack的工作方式：把项目当作一个整体，通过一个给定的主文件（入口文件）index.js，Webpack将从这个文件开始找到项目所有的依赖文件，使用loaders处理它们，最后打包为一个浏览器可是别的js文件。

步骤：1空文件夹中npm install -g webpack; 2 npm init自动创建package.json文件包含当前项目的依赖模块，自定义脚本任务等；3 npm install --save-dev webpack 本项目中安装webpack作为依赖包

4 目录结构 app文件夹用来存放 原始数据 和 即将要写的 js模块，public文件夹用来存放准备给浏览器读取的数据（包括用webpack生成的打包后的js文件和index.html（此唯一目的就是加载打包后的js文件）文件.

webpack的使用

方法一；命令行中使用：webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

方法二：通过配置文件使用：根目录下创建webpack.config.js的文件，

webpack功能：

1调试

生成Source Maps ,提供一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，更易调试。

配置sorce maps 需要配置devtool：‘eval-source-map‘

2 构建本地服务器，监测代码的修改

基于node.js构建，安装组件 npm install --save-dev webpack-dev-server

devtool:‘eval-source-map‘，

devServer:{contentBase:‘./public‘,colors:true,historyApiFallback:true,inline:true

3 Loaders 

webpack通过调用外部脚本或工具可以对各种各样的格式文件进行处理，分析JSON文件转换为javascript文件，或把ES6转换为js，jsx转换为js。

单独安装且在modules关键字下进行配置：test:一个匹配要处理的文件的拓展名的正则表达式；loader：名称；include/exclude手动添加必须处理的文件，或屏蔽不需要处理的文件；query：为loaders提供额外的设置选项。

npm install --save-dev json-loader

4.Babel

Babel是一个js编译平台，可以编译ES6、ES7、JSX

安装依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

npm -install --save react react-dom

5.一切皆模块 CSS

webpack提供两个工具处理样式表，css-loader和style-loader,  css-loader能够使 @import 和 url(...)的方法实现require()的功能；style-loader将所有的计算后的样式加入页面中，  两者组合在一起能使样式表潜入到webpack打包后的js文件中。

npm install --save-dev style-loader css-loader

6 CSS预处理器Sass Less

 

PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

npm install --save-dev postcss-loader autoprefixer

使用在webpack配置文件中进行设置，只需新建一个postcss关键字，并在里面声明依赖的插件

7 Plugins插件

在整个构建过程中生效，执行相关任务。区别：loaders是在打包构建过程中用来处理源文件的jsx scss less..，一次处理一个，插件并不能直接操作单个文件，他直接对整个构建过程起作用。

使用：1npm安装  2 在plugins关键字部分添加该插件的一个实例

推荐插件：htmlWebpackPlugin(依据简单的模版生成最终的html5文件，且自动引用了打包后的js文件。

npm install --save-dev html-webpack-plugin