Webpack开发环境配置

最新推荐文章于 2023-03-02 17:13:26 发布

Sixology.

最新推荐文章于 2023-03-02 17:13:26 发布

阅读量262

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_44685099/article/details/107918503

版权

本文介绍了Webpack的开发和生产环境配置。在开发环境中，使用`webpack`命令配合`--mode=development`参数，将`./src/index.js`打包成`./build/build.js`。生产环境下，同样命令但`--mode=production`会使代码被压缩。Webpack能处理JS、JSON，但不直接处理CSS、图片等资源，并且在生产环境会进行模块化编译和代码压缩。

摘要由CSDN通过智能技术生成

Webpack开发环境配置

1.运行指令

开发环境：webpack ./src/index.js -o ./bulid/build.js --mode=development

webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js,整体打包环境是开发环境

生产环境：webpack ./src/index.js -o ./bulid/build.js --mode=production

webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js,整体打包环境是生产环境

结论：

1.webpack能处理js、json资源，不能处理css、img等其他资源

2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

3.生产环境比开发环境多一个压缩js代码

2.webpack.config.js开发环境

/*
* 
* webpack.config.js  webpack的配置文件
* 作用：指示webpack干哪些活，（当你运行webpack指令时，会加载里面的配置）
* 所有构建工具，都是基于nodejs平台运行的，模块化默认采用commonjs
*
*
*	运行项目指令：
*	webpack： 会将打包结果输出出去
*	npx webpack-dev-server 只会在内存中编译打包，没有输出
* */


// 绝对路径
const {resolve} &#