zoukankan      html  css  js  c++  java
  • webpack

    webpack:模块打包机

      分析项目结构,找到js模块和其它一些浏览器不能直接运行的拓展语言(scss、typescript等),并将其打包为合适的合适供浏览器使用。

    工作方式:把项目当做一个整体,通过一个给定的文件(index.js),webpack从这个文件开始找到项目的所有依赖,使用loaders处理他们,最后打包为一个或多个浏览器可以识别的js文件。

    作用:

      1、模块化:可以把复杂的程序细化为小的文件

      2、打包:把多个js文件打包成一个文件,减少服务器压力

      3、转换:把拓展语言转换成为普通的js,让浏览器可以顺利的运行。

      4、优化:前端越来越复杂,性能会遇到问题,webpack也开始肩负优化和提升性能的责任。

    拿到webpack项目后干的事:

      1、初始化项目
        npm init -y

      2、安装webpack
        cnpm install webpack webpack-cli -D

      3、创建src文件夹 创建dist文件夹

      4、创建webpack.config.js文件

      5、在src中创建入口文件 main.js

      6、初始打包
        npx webpack

      7、安装解析JS的babel文件
        cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

      8、安装解析CSS的loader文件
        cnpm install --save-dev style-loader css-loader sass-loader node-sass

      9、安装html插件
        cnpm install -D html-webpack-plugin

      10、安装处理图片的loader
        cnpm install url-loader file-loader -D

      11 、安装处理vue的文件loader
        cnpm install -D vue-loader vue-template-compiler

      12、安装vue.js

        cnpm install vue -S

      13、安装服务器环境
        cnpm install webpack-dev-server -D

  • 相关阅读:
    spring-注解配置-junit整合测试-aop
    安装springsource-tool-suite插件成功之后找不到spring的处理办法
    spring-搭建-概念-配置详解-属性注入
    JSP-案例-商品增删改
    struts2-自定义拦截器-struts2标签
    struts2-OGNL表达式-OGNL与Struts2的结合
    struts2-result-servletAPI-获得参数-参数封装
    struts2-环境搭建-访问流程-配置详解-常量配置-类详解
    Hibernate-一对多|多对一-多对多
    Hibernate-HQL-Criteria-查询优化
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11252570.html
Copyright © 2011-2022 走看看