微信小程序定制公司_webpack v4 从dev到prd的方法

摘要: webpack v4 从dev到prd的方式 本文关键详细介绍了webpack v4 从dev到prd的方式,网编感觉挺好的,如今共享给大伙儿,也给大伙儿做下参照。一起追随网编回来看一下吧当月迈入了 v4 宣布...

webpack v4 从dev到prd的方法       这篇文章主要介绍了webpack v4 从dev到prd的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本月迎来了 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 模式。

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

eg:

webpack --mode development

Usage

Some Plugin options are now validated CLI has been move to webpack-cli, you need to install webpack-cli to use the CLI The ProgressPlugin (--progress) now displays plugin names 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 css-loader 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: './',//指定产的HTML模板
 `,//产出的HTML文件名
 title: 'index',
 hash: true,// 会在引入的js里加入查询字符串避免缓存,
 minify: {
 removeAttributeQuotes: true

pm 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- -D

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); let cssExtract = new ExtractTextWebpackPlugin({ filename: 'css/css.css', allChunks: true });
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出的对象

如果交换mainFields中的key顺序

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

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

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节选

打包出来的react_dll.js节选

可见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

打包速度显著变快

打包后的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 
/***/ })
/******/ });
webpack.ProvidePlugin 拷贝静态资源 压缩css(npm i -D purifycss-webpack purify-css)

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何自己创建网站