学习webpack

https://github.com/webproblem/learning-article#webpack

https://github.com/lengziyu/learn-webpack

先跟着下面这个例子来做一遍,因为版本原因如果你跟着原文可能会出错,所以我会在这里修复原文中的错误,本文使用的是4.29.3版本

https://segmentfault.com/a/1190000006178770?utm_source=tag-newest

请结合官方文档来进行学习

https://www.webpackjs.com/concepts/#%E5%85%A5%E5%8F%A3-entry-

https://webpack.js.org/configuration/dev-server#devserver

什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

为什么使用webpack

① 模块化开发（import，require）
② 预处理（Less，Sass，ES6，TypeScript……）
③ 主流框架脚手架支持（Vue，React，Angular）
④ 庞大的社区（资源丰富，降低学习成本）

总之一句话，方便快捷便于我们快速的开发。

快速开始

根据整理的资料进行实际操作，并修正版本更新造成一些命令引发的错误，我用的工具是gitbash，平台为windows平台,安装都只是安装到项目文件夹中没有进行全局安装

创建空文件夹

$ mkdir webpack

$ cd webpack

$ mkdir {app,public}

$ ll
total 0
drwxr-xr-x 1 Administrator 197121 0 二月 13 13:23 app/
drwxr-xr-x 1 Administrator 197121 0 二月 13 13:23 public/

安装webpack

进入文件根目录,然后安装webpack到此项目中,这个用的是淘宝镜像,这样可以加快安装速度。

npm指向淘宝镜像

$ cnpm install --save-dev webpack
platform unsupported webpack@4.29.3 › watchpack@1.6.0 › chokidar@2.1.1 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 267 latest versions √ Run 0 scripts Recently updated (since 2019-02-06): 6 packages (detail see file C:\Users\Administrator.KING\Desktop\webpack\node_modules\.recently_updates.txt) √ All packages installed (292 packages installed from npm registry, used 5s(network 5s), speed 100.79kB/s, json 268(498kB), tarball 0B)

创建文件

cd到app文件夹下创建greeter.js和main.js

$ cd app

$ vi greeter.js

$ vi main.js

greeter.js

在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块

module.exports = function() {var greet = document.createElement('div');greet.textContent = "小哥哥,快来啊,快活啊";return greet;
};

main.js

main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

cd到public下面创建index.html

$ cd ..

$ cd public/
$ vi index.html

index.html

其中bundle.js为打包后的js文件名称

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Webpack Sample Project</title></head><body><div id='root'></div><script src="bundle.js"></script></body>
</html>

打包

这里安装使用的就是非全局安装，所以打包也使用非全局打包

$ node_modules/.bin/webpack app/main.js -o public/bundle.js
Hash: c6d5fc7966695da6f6cd
Version: webpack 4.29.3
Time: 358ms
Built at: 2019-02-13 12:54:49
Asset Size Chunks Chunk Names
bundle.js 1.09 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./app/main.js 255 bytes {0} [built]
[1] ./app/Greeter.js 304 bytes {0} [built]WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

进入public打开index.html即可查看效果

创建配置文件

在根目录下创建webpack.config.js文件,主要配置入口文件和打包后文件

module.exports = {entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {path: __dirname + "/public",//打包后的文件存放的地方filename: "bundle.js"//打包后输出文件的文件名
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

修改greeter.js

就是改了下文字内容~

module.exports = function() {var greet = document.createElement('div');greet.textContent = "We still hava a long way to go.";return greet;
};

重新打包

这时候就很简单了,当然如果全局安装的话,直接webpack就可以了

$ node_modules/.bin/webpack
Hash: 9725aade1d1273904ee2
Version: webpack 4.29.3
Time: 364ms
Built at: 2019-02-13 14:19:38Asset     Size  Chunks             Chunk Names
bundle.js  1.1 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./app/main.js 255 bytes {0} [built]
[1] ./app/Greeter.js 314 bytes {0} [built]WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

自定义打包命令

对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置

如果没有这个package.json文件不要慌,直接npm init初始化一个就可以了,现在开始配置。

反正是测试不发布的,所以可以直接回车即可。

$ npm init

打开package.json修改scripts对象添加以下内容

我这里是非全局安装所有添加的是node_modules/.bin/webpack,全局安装的直接添加webpack即可

"start":"node_modules/.bin/webpack"

完整的json文件如下

{"name": "webpack","version": "1.0.0","description": "","main": "webpack.config.js","dependencies": {"webpack-cli": "^3.2.3","webpack": "^4.29.3"},"devDependencies": {},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"node_modules/.bin/webpack"  },"author": "","license": "ISC"
}

再次修改greeter.js

module.exports = function() {var greet = document.createElement('div');greet.textContent = "Hello world";return greet;
};

使用自定义的命令打包

$ npm start> webpack@1.0.0 start D:\wamp\www\webpack
> webpackHash: 1b28a19fd8d2277de6f0
Version: webpack 4.29.3
Time: 376ms
Built at: 2019-02-13 14:31:57Asset      Size  Chunks             Chunk Names
bundle.js  1.08 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./app/main.js 255 bytes {0} [built]
[1] ./app/Greeter.js 294 bytes {0} [built]WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

其中有个关于npm的小知识,需要各位到原文去查看,毕竟我们也是从人家那边学习,不给赞赏给给访问也可以啊

生成Source Maps

webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

devtool选项 配置结果
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:

module.exports = {devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"}
}

可能有的同学一直看到了这个警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

这是什么呢,因为我们没有在webpack.config.js中配置模式造成了,我们顺手也配置下吧

development 开发环境
production  生产环境
module.exports = {mode:'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"}
}

构建本地服务器

可以让浏览器监听你的代码的修改，并自动刷新显示修改后的结果

$ cnpm install --save-dev webpack-dev-server
platform unsupported webpack-dev-server@3.1.14 › chokidar@2.1.1 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 429 latest versions
√ Run 0 scripts
Recently updated (since 2019-02-06): 7 packages (detail see file D:\wamp\www\webpack\node_modules\.recently_updates.txt)
√ All packages installed (472 packages installed from npm registry, used 19s(network 19s), speed 43.94kB/s, json 430(799.49kB), tarball 36.44kB)

修改配置文件webpack.config.js

module.exports = {mode:'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"},devServer: {contentBase: "./public",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
  }
}

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

{"name": "webpack","version": "1.0.0","description": "","main": "webpack.config.js","dependencies": {"webpack-cli": "^3.2.3","webpack": "^4.29.3"},"devDependencies": {"webpack-dev-server": "^3.1.14"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "node_modules/.bin/webpack","server": "webpack-dev-server --open"},"author": "","license": "ISC"
}

运行服务

$ npm run server> webpack@1.0.0 server D:\wamp\www\webpack
> webpack-dev-server --openi ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./public
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: a3f5179d4ce1ace1f048
Version: webpack 4.29.3
Time: 744ms
Built at: 2019-02-13 14:56:40Asset     Size  Chunks             Chunk Names
bundle.js  867 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi ./node_modules/_webpack-dev-server@3.1.14@webpack-dev-server/client?http://localhost:8081 ./app/main.js 40 bytes {main} [built]
[./app/Greeter.js] 294 bytes {main} [built]
[./app/main.js] 255 bytes {main} [built]
[./node_modules/_ansi-html@0.0.7@ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/_ansi-regex@2.1.1@ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/_html-entities@1.2.1@html-entities/index.js] 231 bytes {main} [built]
[./node_modules/_loglevel@1.6.1@loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/_sockjs-client@1.3.0@sockjs-client/dist/sockjs.js] 180 KiB {main} [built]
[./node_modules/_strip-ansi@3.0.1@strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/_webpack-dev-server@3.1.14@webpack-dev-server/client/index.js?http://localhost:8081] ./node_modules/_webpack-dev-server@3.1.14@webpack-dev-server/client?http://localhost:8081 7.78 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.1.14@webpack-dev-server/client/overlay.js] 3.58 KiB {main} [built]
[./node_modules/_webpack-dev-server@3.1.14@webpack-dev-server/client/socket.js] 1.05 KiB {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]+ 12 hidden modules
i ｢wdm｣: Compiled successfully.

Loader

配置loader之前，我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值，各文件修改后的代码如下：

在app文件夹下新增一个greet.json文件

greet.json

{"greetText": "Hi there and greetings from JSON!"
}

greeter.js

var config = require('./greet.json');
module.exports = function() {var greet = document.createElement('div');greet.textContent = config.greetText;;return greet;
};

自动编译的结果显示

Babel

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

  • 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
  • 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；

安装依赖包

新版本的要求依赖包必须是7的,不然是会报错的,报错不可怕,只要看信息总会解决的!

$ cnpm install --save-dev babel-core babel-loader@7  babel-preset-env babel-preset-react

√ Installed 4 packages
√ Linked 121 latest versions
√ Run 0 scripts
peerDependencies WARNING babel-loader@* requires a peer of @babel/core@^7.0.0 but none was installed
Recently updated (since 2019-02-06): 3 packages (detail see file D:\wamp\www\webpack\node_modules\.recently_updates.txt)
√ All packages installed (113 packages installed from npm registry, used 4s(network 4s), speed 329.85kB/s, json 125(427.86kB), tarball 873.08kB)

配置webpack.config.js文件

module.exports = {mode: 'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"},devServer: {contentBase: "./public",historyApiFallback: true,inline: true},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",options: {presets: ["env", "react"]}},exclude: /node_modules/}]}
}

现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过这次我们会使用React，记得先安装 React 和 React-DOM

我只想学下webpack你还给我赠送了react......

$ cnpm install --save react react-dom
√ Installed 2 packages
√ Linked 5 latest versions
√ Run 0 scripts
Recently updated (since 2019-02-06): 5 packages (detail see file D:\wamp\www\webpack\node_modules\.recently_updates.txt)
√ All packages installed (5 packages installed from npm registry, used 1s(network 1s), speed 901.37kB/s, json 7(32.33kB), tarball 1.21MB)

接下来我们使用ES6的语法，更新greeter.js并返回一个React组件

import React, {Component} from 'react'
import config from './config.json';class Greeter extends Component{render() {return (<div>{config.greetText}</div>);}
}export default Greeter

修改main.js如下，使用ES6的模块定义和渲染Greeter模块

import React from 'react';
import {render} from 'react-dom';
import Greeter from './greeter';render(<Greeter />, document.getElementById('root'));

然后重新打包

$ npm start> webpack@1.0.0 start D:\wamp\www\webpack
> webpackHash: bcd934684f9507b2fc78
Version: webpack 4.29.3
Time: 2240ms
Built at: 2019-02-13 16:13:51Asset      Size  Chunks             Chunk Names
bundle.js  2.16 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/Greeter.js] 5.28 KiB {main} [built]
[./app/greet.json] 58 bytes {main} [built]
[./app/main.js] 1.23 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]+ 11 hidden modules

分开配置

虽然可以在webpack.config.js中配置,但是babel的配置项还是很多的,所以我们单独命名一个.babelrc的配置文件

webpack会自动调用.babelrc的配置文件

webpack.config.js

module.exports = {mode: 'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"},devServer: {contentBase: "./public",historyApiFallback: true,inline: true},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",},exclude: /node_modules/}]}
}

.babelrc

{"presets": ["react", "env"]
}

plugins

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

现在我们就用内置插件做个小东西
修改webpack.config.js配置文件 
const webpack = require('webpack'); //引入内置插件
module.exports = {mode: 'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/public",filename: "bundle.js"},devServer: {contentBase: "./public",historyApiFallback: true,inline: true},module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",},exclude: /node_modules/}]},plugins: [new webpack.BannerPlugin('版权所有，翻版必究')],
}

重新打包

$ npm start> webpack-project@1.0.0 start D:\wamp\www\webpack
> webpackHash: 1f027912d9db7df7db0e
Version: webpack 4.29.3
Time: 1397ms
Built at: 2019-02-14 10:20:36Asset      Size  Chunks             Chunk Names
bundle.js  2.16 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[./app/greet.json] 58 bytes {main} [built]
[./app/greeter.js] 5.39 KiB {main} [built]
[./app/main.js] 1.23 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]+ 11 hidden modules

查看bundle.js文件

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

 
安装 
$ cnpm install --save-dev html-webpack-plugin
√ Installed 1 packages
√ Linked 55 latest versions
√ Run 0 scripts
Recently updated (since 2019-02-07): 1 packages (detail see file D:\wamp\www\webpack\node_modules\.recently_updates.txt)
√ All packages installed (54 packages installed from npm registry, used 4s(network 4s), speed 38.09kB/s, json 56(166.11kB), tarball 0B)

1.移除public文件夹，在根目录下创建build文件夹,利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。

2.在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Webpack Sample Project</title></head><body><div id='root'></div></body>
</html>

更新webpack.config.js配置文件

const webpack = require('webpack'); //引入内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',devtool: 'eval-source-map',entry: __dirname + "/app/main.js",output: {path: __dirname + "/build",filename: "bundle.js"},devServer: {contentBase: "./build",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",},exclude: /node_modules/}]},plugins: [new webpack.BannerPlugin('版权所有，翻版必究'),new HtmlWebpackPlugin({template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })],
}

重新打包,重新编译

$ npm start> webpack-project@1.0.0 start D:\wamp\www\webpack
> webpackHash: b3fdcd46964738ddb0a3
Version: webpack 4.29.3
Time: 2052ms
Built at: 2019-02-14 10:37:47Asset       Size  Chunks             Chunk Namesbundle.js   2.16 MiB    main  [emitted]  main
index.html  417 bytes          [emitted]
Entrypoint main = bundle.js
[./app/greet.json] 58 bytes {main} [built]
[./app/greeter.js] 5.39 KiB {main} [built]
[./app/main.js] 1.23 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]+ 11 hidden modules
Child html-webpack-plugin for "index.html":1 assetEntrypoint undefined = index.html[./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./app/index.tmpl.html] 615 bytes {0} [built][./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built][./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]+ 1 hidden module

$ npm run server

build文件夹中多出两个文件,页面显示正常

产品阶段的构建

目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。

对于复杂的项目来说，需要复杂的配置，这时候分解配置文件为多个小的文件可以使得事情井井有条，以上面的例子来说，我们创建一个webpack.production.config.js的文件，在里面加上基本的配置,它和原始的webpack.config.js很像，如下

onst webpack = require('webpack'); //引入内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'production', //模式修改了devtool: 'null',//修改为null压缩打包代码entry: __dirname + "/app/main.js",output: {path: __dirname + "/build",filename: "bundle.js"},devServer: {contentBase: "./build",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",},exclude: /node_modules/}]},plugins: [new webpack.BannerPlugin('版权所有，翻版必究'),new HtmlWebpackPlugin({template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })],
}

package.json

{"name": "webpack-project","version": "1.0.0","description": "","main": "webpack.config.js","dependencies": {"react": "^16.8.1","react-dom": "^16.8.1","webpack": "^4.29.3","webpack-cli": "^3.2.3"},"devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","html-webpack-plugin": "^3.2.0","webpack-dev-server": "^3.1.14"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "node_modules/.bin/webpack","server": "webpack-dev-server --open","build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress" //windows},"author": "","license": "ISC"
}

优化插件

webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能

  • OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
  • UglifyJsPlugin：压缩JS代码； //此插件已经不能使用
  • ExtractTextPlugin：分离CSS和JS文件  //extract-text-webpack-plugin目前版本不支持webpack4

我们继续用例子来看看如何添加它们，OccurenceOrder 和 UglifyJS plugins 都是内置插件，你需要做的只是安装其它非内置插件

安装

$ cnpm install extract-text-webpack-plugin@next
√ Installed 1 packages
√ Linked 12 latest versions
√ Run 0 scripts
Recently updated (since 2019-02-07): 2 packages (detail see file D:\wamp\www\webpack\node_modules\.recently_updates.txt)
√ All packages installed (5 packages installed from npm registry, used 2s(network 2s), speed 62.08kB/s, json 13(97.33kB), tarball 12.91kB)

修改webpack.production.config.js

/*
* @Author: wyy
* @Date:   2019-02-14 10:45:50
* @Email:  2752154874@qq.com
* @Last Modified by:   wyy
* @Last Modified time: 2019-02-14 10:49:01
*/
const webpack = require('webpack'); //引入内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {mode: 'production',devtool: 'null',//修改为null压缩打包代码entry: __dirname + "/app/main.js",output: {path: __dirname + "/build",filename: "bundle.js"},devServer: {contentBase: "./build",//本地服务器所加载的页面所在的目录historyApiFallback: true,//不跳转inline: true//实时刷新
    },module: {rules: [{test: /(\.jsx|\.js)$/,use: {loader: "babel-loader",},exclude: /node_modules/}]},plugins: [new webpack.BannerPlugin('版权所有，翻版必究'),new HtmlWebpackPlugin({template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),new webpack.optimize.OccurrenceOrderPlugin(),new ExtractTextPlugin("style.css")],
}

进行编译

$ npm run build> webpack-project@1.0.0 build D:\wamp\www\webpack
> set NODE_ENV=production && webpack --config ./webpack.production.config.js --progressHash: c9e8a924b38580a073b8
Version: webpack 4.29.3
Time: 3371ms
Built at: 2019-02-14 11:26:04Asset       Size  Chunks             Chunk Namesbundle.js    117 KiB       0  [emitted]  main
index.html  417 bytes          [emitted]
Entrypoint main = bundle.js[2] ./app/main.js 1.23 KiB {0} [built][8] (webpack)/buildin/global.js 472 bytes {0} [built][9] ./app/greeter.js 5.39 KiB {0} [built]
[10] ./app/greet.json 58 bytes {0} [built]+ 7 hidden modules
Child html-webpack-plugin for "index.html":1 assetEntrypoint undefined = index.html[0] ./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./app/index.tmpl.html 615 bytes {0} [built][2] (webpack)/buildin/global.js 472 bytes {0} [built][3] (webpack)/buildin/module.js 497 bytes {0} [built]+ 1 hidden module

最后附上本文的demo

https://github.com/wangyang0210/bky/tree/webpack

转载于:https://www.cnblogs.com/wangyang0210/p/10371064.html

webpack——快速入门【一】相关推荐

  1. webpack快速入门教程

    webpack快速入门教程 1.webpack 介绍 什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...

  2. Webpack 快速入门

    Webpack 简述 如官网所示, 简而言之,webpack 就是讲左侧资源打包成右侧资源的工具 更多 Webpack 内容详见: Webpack 官方文档 Webpack 中文文档 某大佬写的简单入 ...

  3. webpack3快速入门

    webpack3中文网站: https://webpack.docschina.org/ ## webpack快速入门教程 ###1.了解Webpack相关     * 什么是webpack      ...

  4. 001-ant design安装及快速入门【基于纯antd的基本项目搭建】

    一.安装使用 1.1.安装 推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入 在浏览器中使用 script ...

  5. 2017 Vue.js 2快速入门指南

    注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...

  6. 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架

    [Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...

  7. 总觉得该分享点什么！零基础小白如何快速入门前端?

    1.首先零基础学习前端先要有一个计划,了解前端要学习哪些技术. 2.做好自己的时间规划,如何快速入门前端那肯定是需要不断的提高自己的学习效率,学习过程总尽量把手机调至静音给自己一个安静的学习环境和氛围 ...

  8. 快速入门Web前端开发的正确姿势

    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...

  9. vue.js的快速入门使用

    1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...

最新文章

  1. 超级猩猩：网红健身房的故事很好，但别为他人做了嫁衣
  2. 如何为MySQL选择更合适的数据类型
  3. 理解Windows窗体和WPF中的跨线程调用
  4. 软考系统架构师笔记-最后知识点总结（四）
  5. form表单序列化成json数据 将空值用空字符串代替（form表单中checkBox数据会用逗号隔开拼接成字符串）...
  6. sqlmapapi的基本使用和源码阅读
  7. tongweb php,TongWeb服务器部署
  8. 韩忠康mysql正则表达式_Go语言中正则表达式的处理
  9. oracle可视化操作界面——plsql dev安装配置与使用
  10. 7折怎么用计算机,美国联想八通道7折好价，海淘Thinkpad X260 笔记本电脑开箱简评（附齐购物到货过程）...
  11. 关于牛顿-欧拉法的外推和内推的理解
  12. Deep Learning（深度学习）学习笔记整理
  13. 在OpenGL中实现Geometry Instancing
  14. win7开机后svchost.exe占用内存的问题解决
  15. 设计模式(一) 工厂模式 五种写法总结
  16. 关于电影的HTML网页设计-威海影视网站首页-电影主题HTM5网页设计作业成品
  17. 计算机风景画作品,电脑制作的风景画
  18. 【无标题】宅家抗疫也风流
  19. 笔记本电脑连接不上wifi怎么办？看下面4种方法
  20. sip gw功能包括_全面解读SiP

热门文章

  1. aop+注解 实现对实体类的字段校验_SpringBoot2.0实战（6）整合hibernate-validator进行参数校验...
  2. 人到了中年在职场中就应该保持内敛的心态
  3. 债券型理财产品以什么为投资对象？
  4. python%20是什么类型的语言
  5. 女同志50岁退休可以早领养老金，55岁退休拿的养老金比较高，哪个更划算？
  6. 属马的人性格有什么缺点和优点？
  7. 企‮增业‬长‮两的‬种方式：内‮式生‬增长、外‮式延‬增长
  8. 想建出优质的社群，必须懂得社群的本质
  9. 为什么很多设计师都会选择mac？
  10. MFC应用程序框架分析