zoukankan      html  css  js  c++  java
  • webpack操作整理——主要是配置文件的配置

    指令整理——掌握基本步骤

    =====环境配置

    npm init –y  //初始化环境

    npm install –global webpack  //全局

    npm i webpack webpack-cli --save-dev  //本地

    npm i webpack webpack-cli –D

    ====基本使用

    【前提:】src存放项目源代码——dist存放打包后的结果

    npx webpack   //webpack解析

    或者:修改script:

    "scripts": {

    "build": "webpack"

        },

    =====npm run build

    ================自定义配置

    自定义配置文件:

    "scripts": {

    "build": "webpack --config webpack.config.js"

        },

    ===========开发&生产环境模式

    mode: 'development'production

    =====支持写多个配置文件

    "scripts": {

    "build": "webpack --config webpack.config.js",

    "serve": "webpack --config webpack.config2.js",

        },

    加载器:处理其他格式文件,除过:js模块或者json文件

    -npm i style-loader css-loader --save-dev  | -D

    rules: [{

    test: /.css$/,

    use: ['style-loader', 'css-loader']

            },{

    test:/./{png|svg|gifjpg}$/,

    use:【‘file-loader】]

    }]


    插件:

    -npm i –D html-webpack-plugin

    image

    清除插件配置:

    -npm i –D clean-webpack-plugin

    image

    -对less的使用

    npm i –D less-loader less

    imageimage

    image

    ES6—>ES5

    image

    yarn add babel/core

    image

    image


    yarn build

    image

    weboack-dev-server:通过它来打包

    image

    tips:

    【1】一个js文件就是一个模块

    【2】浏览器不认识commonJS规范——通过webpack解决

    【3】

  • 相关阅读:
    弹飞绵羊
    POJ 3308
    狼抓兔子
    块状链表题*1
    块状链表
    双向链表
    Linux入职基础-1.2_U盘安装RedHat5具体步骤
    Linux入职基础-1.1_国内开源的主要镜像站
    VS.NET(C#)--2.9_HTML服务器控件案例
    VS2015按钮方法
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13463100.html
Copyright © 2011-2022 走看看