概览
新建项目
npm init -y
安装webpack & webpack-cli
(c)npm install -D webpack (c)npm install -D webpack-cli# 查看webpack版本(npx )webpack --version
试打包
src/index.js
document.write('Hello Webpack -Mazey')dist/index.html
<!doctype html><html> <head> <title>Start Webpack</title> </head> <body> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js"></script> </body></html>
webpack.config.js
const path = require('path')module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}项目命令行运行：
webpack --config webpack.config.js --mode development# 出现Hash: 1ae48c1f7dc49168e983
Version: webpack 4.6.0
Time: 63ms
Built at: 2018-05-03 14:37:02
Asset Size Chunks Chunk Names
bundle.js 2.84 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 38 bytes {main} [built]此时 dist/ 下多了一个 bundle.js 文件， 打开 dist/index.html 出现 Hello Webpack -Mazey。
在package.json定制脚本
{ // ...
"scripts": { "dev": "webpack --config webpack.config.js --mode development", "build": "webpack --mode production"
}, // ...}# or{ // ...
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors", "deploy": "NODE_ENV=production webpack -p"
}, // ...}然后命令行运行 npm run dev 便等于 webpack --config webpack.config.js --mode development。
一、入口[entry]
语法
1.单个入口语法
entry: string|Array<string>
示例：
// ...entry: './src/index.js'// ...# 等于// ...entry: {
main: './src/index.js'}// ...2.对象语法
entry: {[entryChunkName: string]: string|Array<string>}示例：
// ...entry: {
app: './src/app.js',
vendors: './src/vendors.js'}// ....二、输出[output]
语法
// ...output: {
filename: <output filename>,
path: <path>
}// ...filename: 用于输出文件的文件名。
path: 目标输出目录的绝对路径。
示例：
const path = require('path')const config = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}module.exports = config點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦