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/

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

webpack笔记一 起步

webpack笔记一 起步

安装

起步

初始化项目

模块

使用配置文件 webpack.config.js

使用 npm scripts

webpack笔记一起步

webpack笔记一起步