webpack筆記一起步

時間 2019-12-12

標籤 webpack 筆記起步简体版

原文原文鏈接

webpack筆記一起步

安裝

對於大多數項目，咱們建議本地安裝（--save-dev）。這能夠在引入突破式變動（breaking change）版本時，更容易分別升級項目。javascript

起步

初始化項目

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便可。html

咱們還須要調整 package.json 文件，以便確保咱們安裝包是 private(私有的)，而且移除 main 入口。這能夠防止意外發布你的代碼。java

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

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

安裝示例用的包，好比lodash：git

npm install --save lodash

src/index.jsgithub

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

dist/index.htmlweb

<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：npm

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」。json

模塊

注意，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

> webpack-demo@1.0.0 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/