时间:2021-05-26
本月迎来了 v4 正式版的发布,本文用于学习新特性和总结开发必用plugin & loader,从dev到prd,走你~
Environment
Node.js 4 is no longer supported. Source Code was upgraded to a higher ecmascript version.
Usage
You have to choose (mode or --mode) between two modes now: production or development
本次新版本中引入了 mode 配置项,开发者可在 none,development(开发 ) 以及 production(产品)三种模式间选择。该配置项缺省情况下默认使用 production 模式。
eg:
Usage
新版中将 webpack 命令行工具拆分到单独的仓库中,所以需要额外安装 webpack-cli。
npm init -y //初始化项目npm install webpack webpack-cli -D //安装webpack webpack-cli 依赖npx webpack --mode development // npx可以直接运行node_modules/.bin目录下面的命令或者通过配置package.json的script build
use
module: { rules:[ { test: /\.css$/, use: ['style-loader','css-loader'] } ]}css-loader用来解析处理CSS文件中的url路径,要把CSS文件变成一个模块
多个loader是有顺序要求的,从右往左写,因为转换的时候是从右往左转换
此插件先用css-loader处理一下css文件,再用style-loader把CSS文件变成style标签插入head中
loader
module: { rules:[ { test: /\.css$/, loader: ["style-loader", "css-loader"] }, ]}use+loader
module: { rules:[ { test: /\.css$/, use:[ { loader:"style-loader"}, { loader: 'css-loader', options: {sourceMap: true} } ] } ]}这三种loader的写法,最后打包的结果相同
loader中的options配置项可以用"?"跟在加载器后面
eg:
为以下配置的简写
讲ES6代码转换为ES5
{ test: /\.js/, use: { loader: 'babel-loader', query: { presets: ["env", "stage-0", "react"] } }},babel-loader的预设可以添加在query中,也可以在项目根目录添加 .babelrc 文件
html-webpack-plugin
插件的基本作用就是生成html文件。原理很简单:
将 webpack中entry配置的相关入口thunk 和 extract-text-webpack-plugin抽取的css样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link插入到head元素中,script插入到head或者body中。
const HtmlWebpackPlugin = require('html-webpack-plugin');new HtmlWebpackPlugin({ template: './src/index.html',//指定产的HTML模板 filename: `index.html`,//产出的HTML文件名 title: 'index', hash: true,// 会在引入的js里加入查询字符串避免缓存, minify: { removeAttributeQuotes: true }}),可以用 cnpm search html-webpack-plugin 查找想用loader的用法
less-loader sass-loader
提取公共的css代码
它会将所有的入口 chunk(entry chunks)中引用的 *.css,移动到独立分离的 CSS 文件。因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css)当中。 如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。
npm i extract-text-webpack-plugin@next -Dconst ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');let cssExtract = new ExtractTextWebpackPlugin({ filename: 'css/css.css', allChunks: true});module:{ rules:[ { test: /\.css$/,//转换文件的匹配正则 loader: cssExtract.extract({ use: ["css-loader?minimize"] }) }, ]}plugins:[ ...... , + cssExtract]尽量减少文件解析,用resolve配置文件解析路径,include
rules: { test: /\.js$/, loader:'babel-loader', include: path.resolve(__dirname, 'src'),//只转换或者编译src 目录 下的文件 exclude: /node_modules/ //不要解析node_modules}resolve.mainFields
WebpackTest||| - src| | - index.js|| - lib| | - fetch| || browser.js| node.js| package.json|| - webpack.config.js当从 npm 包中导入模块时(例如,引入lib下的库),此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同,默认值也会有所不同。
package.json
lib文件夹下的package.json中配置相对应模块的key
webpack.config.js
在resolve解析对象中,加入lib的路径
resolve: { extensions: ['.js', '.json'], mainFields: ['main', 'browser', 'node'], modules: [path.resolve('node_modules'), path.resolve('lib')]}index.js
这样在index.js中引用第三方库时,会去查找modules下的路径中是否配置了所需的文件,知道在package.json中找到mainFields中的key对应文件,停止。
let fetch = require('fetch');console.log(fetch);打包后 console.log出的对象
如果交换mainFields中的key顺序
打包后 console.log出的对象,因为找到了key=node对应的文件就停止了查找
DllReferencePlugin
这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
新建webpack.react.config.js
在entry入口写入要打包成dll的文件,这里把体积较大的react和react-dom打包
output中的关键是library的全局变量名,下文详细说明dll&manifest工作原理
打包dll文件
webpack --config webpack.react.config.js --mode development打包出来的manifest.json节选
打包出来的react_dll.js节选
可见manifest.json中的 name值就是
manifest.json就是借书证,_dll_react就像图书馆书籍的条形码,为我们最终找到filename为react_dll.js的参考书
使用“参考书”
在webpack.config.js中加入“借书证”
再运行
打包速度显著变快
打包后的main.js中,react,react-dom.js也打包进来了,成功~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
注意是V4版本的TP-LinkTL-WR885N路由器的相关设置方法哦!!!因为TP-LinkTL-WR885N路由器目前有V1、V2、V3、V4共4个版本;其
这节课讲解webpack4中打包css的应用。v4版本和v3版本并没有特别的出入。1.准备工作众所周知,CSS在HTML中的常用引入方法有标签和标签两种,所以这
文档资料webpack关于webpack-dev-server开启proxy的官方介绍Vue-cliproxyTable解决开发环境的跨域问题——虽然这篇是写v
model是V4的版本文件保存格式,可以作为v4和v5文件格式转换的中间格式。 文件夹是专门装整页文件用的,主要目的是为了更好的保存文件,使它整齐规范。普通计
好久不看webpack已经从3到4了,其实很早到今年2月份就开始发布webpack4的beta版本;每一次webpack的升级都还是建议阅读下《webpack4