Webpack4.x 入门

2018-05-03 本文已影响38人后除

概览

新建项目

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: 1ae48c1f7dc49168e983
Version: webpack 4.6.0
Time: 63ms
Built at: 2018-05-03 14:37:02
    Asset      Size  Chunks             Chunk Names
bundle.js  2.84 KiB    main  [emitted]  main
Entrypoint 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 数组中。