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: './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 -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

{ "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