首页 > Web开发 > 详细

webpack操作整理——主要是配置文件的配置

时间:2020-08-09 16:27:58      阅读:79      评论:0      收藏:0      [点我收藏+]

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

=====环境配置

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|gif\jpg}$/,

use:【‘file-loader】]

}]


插件:

-npm i –D html-webpack-plugin

技术分享图片

清除插件配置:

-npm i –D clean-webpack-plugin

技术分享图片

-对less的使用

npm i –D less-loader less

技术分享图片技术分享图片

技术分享图片

ES6—>ES5

技术分享图片

yarn add babel/core

技术分享图片

技术分享图片


yarn build

技术分享图片

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

技术分享图片

tips:

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

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

【3】

webpack操作整理——主要是配置文件的配置

原文:https://www.cnblogs.com/macro-renzhansheng/p/13463100.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!