webpack笔记一起步

安装

对于大多数项目，我们建议本地安装（--save-dev）。这可以在引入突破式变更（breaking change）版本时，更容易分别升级项目。

起步

初始化项目

mkdir webpack-project && cd webpack-project
npm init
npm install webpack webpack-cli --save-dev

可能遇到npm ERR! Maximum call stack size exceeded的错误，尝试升级npm，然后执行npm cache clean --force即可。

我们还需要调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1"
    }
}

项目结构：

   webpack-demo
   |- package.json
   |- /dist
     |- index.html
   |- /src
     |- index.js

安装示例用的包，比如lodash：

npm install --save lodash

src/index.js

import _ from 'lodash';
function component() {
    let element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}
document.body.appendChild(component());

dist/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack Demo</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

然后再命令行执行npx webapck：

C:\Users\Jehorn\Work\learn\webpack-demo>npx webpack
Hash: 090d6ac02451c0b4b043
Version: webpack 4.30.0
Time: 3030ms
Built at: 2019-04-23 17:51:44
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 232 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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/

浏览器打开index.html可以看到显示“Hello webpack”。

模块

注意，webpack 不会更改代码中除import和export语句以外的部分。如果使用其它ES6特性，需要添加babel之类的转译器（transpiler）。

使用配置文件 webpack.config.js

在项目根目录下增加webpack.config.js文件。

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

执行打包：

如果webpack.config.js存在，则webpack命令将默认选择使用它。这里使用--config选项表示可以传递任何名称的配置文件。对于需要拆分成多个文件的复杂配置是非常有用的。

C:\Users\Jehorn\Work\learn\webpack-demo>npx webpack --config webpack.config.js
Hash: d660fe3445f5b4b2318a
Version: webpack 4.30.0
Time: 373ms
Built at: 2019-04-23 18:01:39
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 232 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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 scripts

配置package.json文件，即可使用npm run build命令来打包程序：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1"
    },
    "dependencies": {
        "lodash": "^4.17.11"
    }
}

通过在npm run build命令和你的参数之间添加两个中横线，可以将自定义参数传递给webpack。

C:\Users\Jehorn\Work\learn\webpack-demo>npm run build

> [email protected] build C:\Users\Jehorn\Work\learn\webpack-demo
> webpack

Hash: d660fe3445f5b4b2318a
Version: webpack 4.30.0
Time: 386ms
Built at: 2019-04-23 18:10:58
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
Entrypoint main = main.js
[1] ./src/index.js 232 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

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/

The end... Last updated by: Jehorn, April 23, 2019, 6:14 PM
demo源码