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】

  • 相关阅读:
    mysql修改数据库的存储引擎(InnoDB)
    如何查看进程/服务是否启动
    Spark Streaming 入门
    Graphlab create的基本使用
    构建房屋预测回归模型
    构建应用深层特征的图像检索系统
    构建商品评价的分类器
    Elastic Static初识(01)
    《Linux就该这么学》笔记(二)
    《Linux就该这么学》笔记(一)
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13463100.html
Copyright © 2011-2022 走看看