概览
新建项目
npm init -y安装webpack & webpack-cli
(c)npm install -D webpack(c)npm install -D webpack-cli# 查看webpack版本(npx )webpack --version试打包
src/index.js
document.write('Hello Webpack -Mazey')dist/index.html
<!doctype html><html> ???<head> ???????<title>Start Webpack</title> ???</head> ???<body> ???????<script src="bundle.js"></script> ???</body></html>webpack.config.js
const path = require('path')module.exports = { ???entry: './src/index.js', ???output: { ???????filename: 'bundle.js', ???????path: path.resolve(__dirname, 'dist') ???}}项目命令行运行：
webpack --config webpack.config.js --mode development# 出现Hash: 1ae48c1f7dc49168e983Version: webpack 4.6.0Time: 63msBuilt at: 2018-05-03 14:37:02 ???Asset ?????Size ?Chunks ????????????Chunk Namesbundle.js ?2.84 KiB ???main ?[emitted] ?mainEntrypoint main = bundle.js[./src/index.js] 38 bytes {main} [built]此时 dist/ 下多了一个 bundle.js 文件， 打开 dist/index.html 出现 Hello Webpack -Mazey。
在package.json定制脚本
{ ?// ... ?"scripts": { ???"dev": "webpack --config webpack.config.js --mode development", ???"build": "webpack --mode production" ?}, ?// ...}# or{ ?// ... ?"scripts": { ???"dev": "webpack-dev-server --devtool eval --progress --colors", ???"deploy": "NODE_ENV=production webpack -p" ?}, ?// ...}然后命令行运行 npm run dev 便等于 webpack --config webpack.config.js --mode development。
一、入口[entry]
语法
1.单个入口语法
entry: string|Array<string>示例：
// ...entry: './src/index.js'// ...# 等于// ...entry: { ???main: './src/index.js'}// ...2.对象语法
entry: {[entryChunkName: string]: string|Array<string>}示例：
// ...entry: { ???app: './src/app.js', ???vendors: './src/vendors.js'}// ....二、输出[output]
语法
// ...output: { ???filename: <output filename>, ???path: <path>}// ...- filename: 用于输出文件的文件名。
- path: 目标输出目录的绝对路径。
示例：
const path = require('path')const config = { ???entry: './src/index.js', ???output: { ???????filename: 'bundle.js', ???????path: path.resolve(__dirname, 'dist') ???}}module.exports = config若配置多个入口，为保证每个文件具有唯一名称，需要用到占位符。
// ...filename: '[name].js',// ...三、模式[mode]
语法
mode: string- development: 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
- production: 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
设置 模式 后则不需要在命令后带上 --mode development。
四、载入器?[loader]
语法
module: { ???rules: [ ?????{ test: <.*>, use: <loader> }, ?????{ test: <.*>, use: <loader> } ???]}- test: 标识出应该被对应的 loader 进行转换的某个或某些文件。
- use: 表示进行转换时，应该使用哪个 loader。
示例：
const path = require('path')const config = { ?// ... ?module: { ???rules: [ ?????{ test: /\.css$/, use: 'css-loader' } ???] ?}}module.exports = config碰到“在 require()/import 语句中被解析为 .css 的路径”时，打包之前，先使用 css-loader 转换一下。
五、插件[plugins]
语法
const <PluginName> = require(<plugin-name>)// ...plugins: [ ???new <PluginName>({ ???????<attribute>: <value> ???})]想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。
Webpack4.x 入门
原文地址：https://www.cnblogs.com/mazey/p/8987946.html