webpack及其配置

Webpack

1.webpack主要用来模块和打包

2.webpack和gulp对比：

什么时候用gulp

a.如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念

b.只需要进行简单的合并、压缩，就使用grunt/gulp即可

不同点：

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能

 

webpack安装使用：

安装node webpack

--save-dev`是开发时依赖，项目打包后不需要继续使用的

1.如何打包：

vscode的powershell终端打开：ctrl+`

webpack  src/main.js dist/bundle.js

简化上述命令：创建一个webpack.config.js文件创建入口和出口

将node_modules/.bin/webpack 改成 npm run build :

可以在package.json的scripts中定义自己的执行脚本: "script":{"build": "webpack"}

 

loader:

将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等

使用：

1.通过npm安装,2.在webpack.config.js中的modules关键字下进行配置