今回は、dev から prd への使用方法と、dev から prd へ使用する際の注意事項について詳しく説明します。実際のケースを見てみましょう。
この記事は、新機能を学習し、dev から prd まで開発に必須のプラグインとローダーをまとめたものです。どうぞ~
大きな変更点
環境
Node.js 4 は廃止されましたソース コードは、より高い ecmascript バージョンにアップグレードされました。
使用法
現在、本番モードまたは開発モードの 2 つのモードから (mode または --mode) を選択する必要があります
この新しいバージョンでは、モード設定項目が導入されています。なし、開発を使用できます: (開発) と運用 (製品) の 3 つのモードから選択します。この構成項目は、デフォルトで実稼働モードを使用します。
開発モードでは、ブラウザのデバッグ関連ツール、非常に高速な増分コンパイル、豊富で包括的なエラー情報など、究極の開発エクスペリエンスを提供します...
実稼働モードには、多くのリリースの最適化とコード圧縮が含まれています。滑らかな実行時の最適化、開発関連のコードの削除、使いやすさなど。
none はプリセットを使用せず、古いバージョンですべて自己構成された元の状態と同等です。
eg:
webpack --mode development
ログイン後にコピー
ログイン後にコピー
Usage
(--progress) はプラグイン名を表示するようになりました
少なくとも新しいプラグインシステムに移行されたプラグインについては
-
新しいバージョンでは、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-
"scripts": {
"build": "webpack --mode development",
},ログイン後にコピー
のスクリプトビルドを設定することによって、ローダーメソッドの概要をロードします
use
module: {
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}ログイン後にコピー
css-loader は、CSS ファイル内の URL パスを解析して処理し、 CSS ファイルをモジュールに変換します変換は右から左に行われるため、複数のローダーには右から左に書かれる順序要件がありますこのプラグインは、最初に 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}
}
]
}
]
}ログイン後にコピー
これら3つのローダーの書き方は最終的なパッケージング結果は同じです
ローダーの後には「?」を付けることができます
例:
{
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/'
}
}
}ログイン後にコピー
必要なローダーとプラグインを開発します
css-loader
babel-loader
- ES6 コードを ES5 に変換することについて話します
{
test: /\.js/,
use: {
loader: 'babel-loader',
query: {
presets: ["env", "stage-0", "react"]
}
}
},ログイン後にコピー
.babelrc
{
"presets": [
"env",
"stage-0",
"react"
]
}ログイン後にコピー
- html-webpack-pluginの基本機能プラグインは HTML ファイルを生成します。原理は非常に簡単です:
webpack のエントリ設定の関連エントリ サンクと、extract-text-webpack-plugin によって抽出された CSS スタイルを、プラグインによって提供されるテンプレート、または templateContent 設定項目によって指定されたコンテンツに挿入します。具体的にはhead要素にスタイルリンクを挿入し、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 を使用して、使用したいローダーの使用方法を見つけることができます
less-loader sass-loader
prd に最適化
パブリック CSS コードを抽出します
エントリ チャンク (エントリ チャンク) で参照されている *.css はすべて別の CSS ファイルに移動されます。したがって、スタイルは JS バンドルに埋め込まれなくなり、別の CSS ファイル (styles.css) に配置されます。 スタイル ファイルのサイズが大きい場合、CSS バンドルが JS バンドルと並行して読み込まれるため、初期の読み込みが速くなります。
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出的对象
如果交换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）
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
webpack中dev-server使用步骤详解
Angular2中如何使用Dom
以上がdevからprdまでの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
