使用webpck实现模块化打包

如何使用webpck实现模块化打包

• webpack作为模块打包工具，可以实现模块化代码打包的问题

• 对于有环境兼容问题的代码：可以在打包过程中通过Loader机制对其进行编译转换，在进行打包

• 对于不同种类的前端模块，支持在javaScript中以模块化的方式载入任意类型的资源文件：例如可以通过webpack实现在JavaSCript中加载css文件，被加载的css文件通过style的方式工作

• 具备代码拆分能力 项目所有模块按需分块打包，按需加载

webpack快速上手

配置webpack打包过程

webpack.config.js运行在nodejs环境，可以直接在文件中使用path之类的nodejs内置模块

例子

webpack工作模式

针对不同环境的三组预设配置

• production模式 启动内置优化插件，自动优化打包结果，打包速度较慢（默认）

• development模式 自动优化打包速度，添加一些调试过程中的辅助插件以便于更好的调试错误

• none模式 运行最原始的打包，不做任何额外处理，分析模块打包结果

修改方式

• 通过cli --mode参数传入

• 通过配置文件设置mode属性