进击webpack4 (基础篇:配置 一)
前文:
进击webpack 4 (基础篇 一)
webpack.config.js基础配置
webpack 有4大概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
- 入口与出口
//webpack.config.js
const path = require('path')
module.exports = {mode:'development', // 指定生产还是开发entry:'./src/index.js', // 入口文件output:{filename:'bundle.js', // 打包后的文件名path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对路径 我们需要node的path模块去解析路径}
}
mode: 指定环境是development还是production 决定了打包出来的文件是压缩还是未压缩的
entry: 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 其中分为单入口跟多入口配置 可以是string,array,object
// entry:'./src/index.js' 是下面的简写entry:{main: './src/index.js'},
output:包含打包后的名字跟路径, 如果是多入口应用, 可以设置filename为[name].js, entry里的key值会替换掉name 生成文件夹。
- loader
loader 用于对模块的源代码进行转换。
const path = require('path')
module.exports = {mode:'development', // 指定生产还是开发entry:'./src/index.js', // 入口文件output:{filename:'bundle.js', // 打包后的文件名path:path.resolve(__dirname,'./dist') // 这里需指定一个绝对路径 我们需要node的path模块去解析路径},module: {rules: [] // 包含一系列的规则}
}
- plugin
plugin是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。
// 代码省略
module: {rules: [ ] //包含一系列规则},plugins: [// new PluginName 去生成js对象供给 webpack compiler 调用]
- 本地开发配置服务
yarn add webpack-dev-server -D
本地开发需要安装webpack-dev-server 内部是基于express 实现的一个服务 ,可让让服务运行在本地,开发更方便
安装完毕在dist目录下新建一个index.html 并且引入打包好后的bundle.js
运行npx webpack-dev-server
并未显示index.html 需要在webpack-config.js 配置
plugins: [// new PluginName 去生成js对象供给 webpack compiler 调用],devServer:{ contentBase: './dist', //当前服务以哪个作为静态资源路径host:'localhost', // 主机名 默认是localhostport:3000, // 端口配置open:true, // 是否自动打开网页}
重新运行npx webpack-dev-server
自动打开网页并且能正常显示页面
如果觉得npx 麻烦的话,可以在package.json 配置脚本
"scripts": {"dev": "webpack-dev-server --config webpack.config.js"}
样式文件的处理
注意:为了显示效果,不用每次手动修改html 我们先装一个html模板插件
yarn add html-webpack-plugin -D
webpack-config.js 配置
const HtmlWebpackPlugin = require('html-webpack-plugin')//....plugins: [// new PluginName 去生成js对象供给 webpack compiler 调用new HtmlWebpackPlugin({template:'./index.html', // 作为模板的文件filename:'index.html' //打包生成后的文件 })],
进入正题:
样式文件分为css,less scss 之类的 需要各种loader 先以css作为 样例
需要先安装 style-loader跟css-loader
- css的处理
yarn add style-loader css-loader -D
webpack.config.js 配置
// 代码省略
module: {rules: [{test:/\.css$/,use:['style-loader','css-loader']}]},
rules 里放的是一个个规则对象, test是匹配到的文件 loader是从下往上执行, 从右往左执行, 也就是说命中css结尾的文件后 先用css-loader去解析,解析完毕后交由style-loader 插入到html模板里
此处use内部 有2种写法
loader:['style-loader','css-loader']
// 字符串写法loader:['style-loader',{loader:'css-loader',options:{}}
对象写法 在options里可以配置你需求的参数
- less的处理
需要安装less less-loader
yarn add less less-loader -D
//webpack-config.jsmodule: {rules: [{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]},
sass 配置同理
- 给样式加前缀 如-webkit- 需要安装autoprefixer, postcss-loader
yarn add postcss-loader autoprefixer -D
根目录需要新建postcss.config.js
// postcss.config.js
module.exports = {plugins: [require('autoprefixer')]
}
webpack-config.jsrules: [{test: /\.less$/,use: ["style-loader","css-loader","less-loader"]}]
- 提取样式文件
yarn add mini-css-extract-plugin -D
//config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 注意MiniCssExtractPlugin 不能在development环境中使用 !!//....
mode:'production', // 指定生产还是开发module: {rules: [{test: /\.less$/,use: [MiniCssExtractPlugin.loader,"css-loader","less-loader"]}]},plugins: [// new PluginName 去生成js对象供给 webpack compiler 调用new HtmlWebpackPlugin({template:'./index.html',filename:'index.html'}),new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"})]//...
- 压缩提取出来的样式文件
需要用到uglifyjs-webpack-plugin,optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
//webpack-config.js
module.exports = {//...optimization: { // 优化项 这里OptimizeCSSAssetsPlugin 需要UglifyJsPluginminimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourceMap: true // set to true if you want JS source maps}),new OptimizeCSSAssetsPlugin({})]},
}
js文件的处理
这里自然轮到我们的babel出场啦 把es6解析为es5 需要这几个loader
yarn add babel-loader @babel/core @babel/preset-env -D
{test:/\.js/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env']}}
},
es7的语法类似
class Parent{}
这种需要@babel/plugin-proposal-class-properties
yarn add @babel/plugin-proposal-class-properties -D
另外装饰器方面需要
yarn add @babel/plugin-proposal-decorators -D
{test:/\.js/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env'],plugins: [["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }]]}}
},
像一些js内置的api 比如生成器 这种需要
yarn add @babel/plugin-transform-runtime -D
exclude:/node_modules // 必须配置 不然会解析到node_modules 里的js//....plugins: [["@babel/plugin-proposal-decorators", { "legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"]]
还有一些es7 实例上的某些方法 。字符串的include 这些也要转换
yarn add @babel/polyfill -D
需要添加到entry上或者在入口文件导入
全局变量的引入问题
有时候我们不想在每个模块都导入某个库或者插件 只需要这样配置
plugins: [// new PluginName 去生成js对象供给 webpack compiler 调用new webpack.ProvidePlugin({ // 自动在每个模块内先导入了ReactReact:'react'}),
],
静态资源的处理
yarn add file-loader url-loader -D
{test: /\.png|jpg|gif$/,use: {loader:'url-loader',options:{limit:2048 // 小于2k 的会用url-loader转为base64 否则file-loader转为真实imgoutputPath:'static/image/' //指定输出目录},}},
预告: 多页面配置 跨域 区分不同环境 映射
进击webpack4 (基础篇:配置 一)相关推荐
- 【linux】循序渐进学运维-基础篇-配置静态IP详解
大家好,我是高胜寒,本文是Linux运维-循序渐进学运维-基础篇的第61篇文章 文章目录 前言 查看网卡物理连接是否正常的命令 1. mii-tool 2. ifconfig 1) 启动关闭指定网卡 ...
- SpringBoot基础篇配置信息之配置刷新
2019独角兽企业重金招聘Python工程师标准>>> 更多Spring文章,欢迎点击 一灰灰Blog-Spring专题 配置的刷新,从第一篇就提出了这个问题,但是一直都没有说到,那 ...
- java基础篇--------------配置jdk的环境变量
先下载一个jdk,我自用的是1.7版本的. 安装这个就比较简单直接下一不就行,在jdk安装好了之后我们就需要配置环境变量. 具体步骤: (一) 搭建Java开发环境(安装JDK,配置环境变量) 安装J ...
- 进击webpack4 (优化篇)
进击webpack 4 (基础篇一) 进击webpack4 (基础篇二:配置 一) 进击webpack4 (基础篇三:配置 二) 不解析不依赖第三方模块的模块 noParse 有一些第三方模块,它本身 ...
- Webpack配置全解析(基础篇)
Webpack凭借强大的功能,成为最流行和最活跃的打包工具,也是面试时高级程序员必须掌握的"软技能":笔者结合在项目中的使用经验,介绍webpack的使用:本文是入门篇,主要介 ...
- Puppet基础篇9-Puppetmaster多环境配置
Puppet基础篇9-Puppetmaster多环境配置 零基础学习Puppet自动化配置管理系列文档 扩充现有架构环境是对一个企业成长的见证 将基础环境模块部署到puppetmaster端之后就可以 ...
- 鸟哥的Linux私房菜(基础篇)- 第二十四章、 X Window 配置介绍
第二十四章. X Window 配置介绍 最近升级日期:2009/08/07 在 Linux 上头的图形介面我们称之为 X Window System,简称为 X 或 X11 罗!为何称之为系统呢?这 ...
- 鸟哥的Linux私房菜(基础篇)- 第六章、Linux 的文件权限与目录配置
第六章.Linux的文件权限与目录配置 最近更新日期:2009/08/18 Linux最优秀的地方之一,就在于他的多人多任务环境.而为了让各个使用者具有较保密的文件数据,因此文件的权限管理就变的很重要 ...
- g4e基础篇#3 Git安装与配置
现在你已经对Git有了最基本的了解,现在让我们开始动手开始安装和配置Git环境. Git工具包括Git命令行工具,图形化工具和服务器环境:在我们这个教程中,我们会使用以下软件配置我们的环境: • Wi ...
- Ansible系列-基础篇-Ansible Inventory的合理化配置
欢迎关注个人公众号 DailyJobOps 原文地址:Ansible系列-基础篇-Ansible Inventory的合理化配置 这里写目录标题 Ansible Inventory内置参数 Inven ...
最新文章
- Ramsey定理数学
- linux db2 cached太大,cache
- BeanFactory和ApplicationContext有什么区别
- 唯品会php接口,唯品会链接生成联盟链接 - 唯品会API免费API接口-唯品会API开放API接口-云商数据(www.ecapi.cn)...
- resteasy_RESTEasy教程第1部分:基础
- 什么是485转光纤?485光纤转换器功能特点及技术参数详解
- 两个字符串组成tuple_史上最全python字符串操作指南
- python截取字符串函数substr_PHP substr():截取字符串
- 任意文件上传之绕过云waf+本地防火墙双重防护
- html5编写商城页面,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识...
- MIUI12_Global未知来源安装等待时间patcher
- 涨点神器!特征金字塔技术总结
- 计算机发展的英语介绍ppt模板,计算机发展跟应用-锐得ppt模板资料.ppt
- 股票因子扩展2(双神因子计算)——从零到实盘5
- vs使用快捷键注销多行
- 黑帽SEO强势技术大纲
- onenote android同步,移动版OneNote更新 自动同步支持Office365
- 成都百知教育:做Shopee店铺没有方向,这3大层级必须理清!
- 利用gdal给影像添加金字塔
- 行为金融(三):期望效用理论与前景理论