WebPack否以看作是模块挨包机:它作的工作 是,剖析 您的名目构造 ,找到JavaScript模块以及其它的一点儿阅读 器不克不及 间接运转的拓铺说话 (Scss,TypeScript等),并将其挨包为折适的格局 以求阅读 器运用。
一.正在cmd末端执止 npx webpack敕令
二.正在package.json文献异级树立 webpack.config.js文献,内容以下:
一
二
三
四
五
六
七
八
九
const path = require( 三 九;path 三 九;);
module.exports = {
entry: 三 九;./src/index.js 三 九;, // 进口
output: { // 没心
filename: 三 九;bundle.js 三 九;, // 文献名
path: path.resolve(__dirname, 三 九;dist 三 九;) // 天生 路径
}
};
执止敕令 npx webpack --config webpack.config.js
三.修正 package.json剧本
一
二
三
四
五
六
七
八
九
一0
一 一
一 二
一 三
一 四
一 五
一 六
一 七
一 八
{
"name": "webpack-demo",
"version": " 一.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 一",
+ "build": "webpack" //修正 敕令 执止要领
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^ 四.0. 一",
"webpack-cli": "^ 二.0. 九",
"lodash": "^ 四. 一 七. 五"
}
}
执止敕令 npm run build
论断:天生 相似 上面的目次 ,挨谢index.html 有Hello webpack隐示
一
二
三
四
五
六
七
八
九
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules