?Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API.
1 基本設(shè)置
- npm初始化
npm init -y - webpack安裝
npm install --save-dev webpack - webpack-cli安裝
?webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project, providing a set of tools to improve the setup of custom webpack configuration.
npm install --save-dev webpack-cli - webpack運行
"scripts": {
"build": "webpack --config webpack.config.js"
}
1.1 Project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
let element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
存在的問題
- It is not immediately apparent that the script depends on an external library.
- If a dependency is missing, or included in the wrong order, the application will not function properly.
- If a dependency is included but not used, the browser will be forced to download unnecessary code.
2 Creating a Bundle
??分離source與dist.
??The "source" code is the code that we'll write and edit.
??The "distribution" code is the minimized and optimized output of our build process that will eventually be loaded in the browser:
webpack-demo
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
??To bundle the lodash dependency with index.js, we'll need to install the library locally:
npm install --save lodash
src/index.js
??index.js explicitly requires lodash to be present, and binds it as "_"(no global scope pollution).
??By stating what dependencies a module needs, webpack can use this information to build adependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.
import _ from "lodash"; // 在npm 安裝了loadsh
function component() {
let element = document.createElement("div");
// 這里直接使用
element.innerHTML = _.join(["Hello", "webpack"], " ");
return element;
}
document.body.appendChild(component());
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
<!-- <script src="./src/index.js"></script> -->
<script src="main.js"></script>
</body>
</html>
運行
??run npx webpack, which will take our script at src/index.js as the entry point, and will generate dist/main.js as the output.
??The npx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:
> npx webpack
Hash: da7648cab100b6222869
Version: webpack 4.29.0
Time: 857ms
Built at: 2019-01-27 10:36:40
Asset Size Chunks Chunk Names
main.js 19 KiB 0 [emitted] main
Entrypoint main = main.js
[18] ./src/index.js 249 bytes {0} [built]
+ 51 hidden modules
3 Modules
??The import and export statements have been standardized in ES2015 and are supported in most browsers. Some older browsers still lag behind but webpack supports modules out of the box.Behind the scenes, webpack actually "transpiles" the code so that older browsers can also run it.
??Note that webpack will not alter any code other than import and export statements. If you are using other ES2015 features, make sure to use a transpiler such as Babel or Bublé via webpack's loader system.
4 Using a Configuration
??See the configuration documentation to learn more.
webpack.config.js
const path=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'main.js',
path:path.resolve(__dirname,'dist')
}
};
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"dev": "webpack --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
