webpack及其配置

    技术2022-07-10  122

    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关键字下进行配置

    Processed: 0.015, SQL: 9