webpack v4 从dev到prd的方法


Posted in Javascript onApril 02, 2018

概述

本月迎来了 v4 正式版的发布,本文用于学习新特性和总结开发必用plugin & loader,从dev到prd,走你~

Big changes

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 模式。

  1. development 模式给你极致的开发体验,包含浏览器调试相关工具,极快的增量编译,丰富全面的报错信息...
  2. production 模式则包含大量发版优化,代码压缩,丝般润滑的运行时优化,开发相关代码的排除,易用,etc.
  3. none 不使用预设,等于老版本中全部自己配置的原始状态。

eg:

webpack --mode development

Usage

  1. Some Plugin options are now validated
  2. CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI
  3. The ProgressPlugin (--progress) now displays plugin names
  4. At least for plugins migrated to the new plugin system

新版中将 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

"scripts": {
 "build": "webpack --mode development",
},

加载loader方法总结

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:

{ 
 test: /\.jpeg$/, 
 use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/', 
}

为以下配置的简写

{ 
 test: /\.jpeg$/, 
 use: {
  loader:'url-loader',
  options:{
   limit:1024,
   name:[path][name].[ext],
   outputPath:img/
   publicPath:output/'
  }
 }
}

开发必备的loader&plugins

  1. css-loader
  2. babel-loader

讲ES6代码转换为ES5

{
 test: /\.js/,
 use: {
  loader: 'babel-loader',
  query: {
   presets: ["env", "stage-0", "react"]
  }
 }
},

babel-loader的预设可以添加在query中,也可以在项目根目录添加 .babelrc 文件

.babelrc
{
 "presets": [
  "env",
  "stage-0",
  "react"
 ]
}

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

优化向prd进发

提取公共的css代码

它会将所有的入口 chunk(entry chunks)中引用的 *.css,移动到独立分离的 CSS 文件。因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css)当中。 如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。

npm i extract-text-webpack-plugin@next -D
const 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

{
 "name": "fetch",
 "version": "1.0.0",
 "description": "",
 "node": "./node.js",
 "browser": "./browser.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

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出的对象

webpack v4 从dev到prd的方法

如果交换mainFields中的key顺序

mainFields: ['main', 'node','browser']

打包后 console.log出的对象,因为找到了key=node对应的文件就停止了查找

webpack v4 从dev到prd的方法

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

新建webpack.react.config.js

const path = require('path');
const webpack = require('webpack')
module.exports = {
 entry: {
  react: ['react', 'react-dom']
 },
 output: {
  path: path.join(__dirname, 'dist'),// 输出动态连接库的文件名称
  filename: '[name]_dll.js',
  library: '_dll_[name]'//全局变量的名字,其它会从此变量上获取到里面的模块
 },
 // manifest 表示一个描述文件
 plugins: [
  new webpack.DllPlugin({
   name: '_dll_[name]',
   path: path.join(__dirname, 'dist', 'manifest.json')//最后打包出来的文件目录和名字
  })
 ]
}

在entry入口写入要打包成dll的文件,这里把体积较大的react和react-dom打包

output中的关键是library的全局变量名,下文详细说明dll&manifest工作原理

打包dll文件

webpack --config webpack.react.config.js --mode development

打包出来的manifest.json节选

webpack v4 从dev到prd的方法

打包出来的react_dll.js节选

webpack v4 从dev到prd的方法

可见manifest.json中的 name值就是

output:{
  library:_dll_react
}

manifest.json就是借书证,_dll_react就像图书馆书籍的条形码,为我们最终找到filename为react_dll.js的参考书

使用“参考书”

在webpack.config.js中加入“借书证”

new webpack.DllReferencePlugin({
  manifest: path.join(__dirname, 'dist', 'manifest.json')
})

再运行

webpack --mode development

打包速度显著变快

webpack v4 从dev到prd的方法

打包后的main.js中,react,react-dom.js也打包进来了,成功~

import React from 'react';\n//import ReactDOM from 'react-dom';
 (function(module, exports, __webpack_require__) {

"use strict";
eval("\n\n//import name from './base';\n//import React from 'react';\n//import ReactDOM from 'react-dom';\n//import ajax from 'ajax';\n//let result = ajax('/ajax');\n\n//ReactDOM.render(<h1>{result}</h1>, document.getElementById('root'));\n// fetch fetch.js fetch.json fetch文件夹\n//let fetch = require('fetch');\n//console.log(fetch);\n//let get = require('../dist/bundle.js');\n//get.getName();\nconsole.log('hello');\n\nvar name = 'zfpx';\nconsole.log(name);\nif (true) {\n  var s = 'ssssssssssssssssssssssss';\n  console.log(s);\n  console.log(s);\n  console.log(s);\n  console.log(s);\n}\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

未完待续

  1. webpack.ProvidePlugin
  2. 拷贝静态资源
  3. 压缩css(npm i -D purifycss-webpack purify-css)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
vue小白入门教程
Apr 02 #Javascript
Angular父组件调用子组件的方法
Apr 02 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
手把手教你python实现SVM算法
2017/12/27 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python中return self的用法详解
2018/07/27 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
销售个人求职信范文
2014/04/28 职场文书
教师考察材料范文
2014/06/03 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
商业计划书范文
2019/04/24 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python