-
創(chuàng)建一個文件夾作為項目的根目錄桃移，打開cmd（最好是已管理員的身份運行，避免出現(xiàn)讀寫權(quán)限的問題）劳跃。
進入項目根目錄唱遭，運行以下幾行命令：npm init -y npm install webpack --save-dev npm install webpack-cli --save-dev -
創(chuàng)建目錄和文件：/src 指的是source，我們編輯代碼的地方审胚；/dist 指的是 distribution匈勋，是放置壓縮和優(yōu)化后的代碼，并最終顯示在瀏覽器上膳叨。
目錄視圖 -
修改package.json洽洁，增加private屬性，刪除main菲嘴。這是為了防止你的代碼被意外發(fā)布饿自。
圖例 -
index.html 中引入 main.js
圖示 -
在根目錄創(chuàng)建 webpack.config.js
圖示
將下面的代碼貼進去：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
-
在package.json中加入
"build": "webpack"
圖示 -
cmd 中運行
npm run build，main.js 就生成啦!
成功
配置 webpack-dev-server龄坪，使用熱替換
- 安裝
npm install --save-dev webpack-dev-server - 修改 webpack.config.js
module.exports = {
devServer: {
contentBase: './dist'
}
}
- 在package.json scripts 添加 start
"start": "webpack-dev-server --open"
- 啟用 HMR昭雌，打開webpack.config.js，devServer 增加
hot: true健田， 增加 plugins 部分
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
mode: 'production'
};
- cmd 中運行
npm start就可以了≈蛭裕現(xiàn)在修改代碼可以直接在瀏覽器中看到了，無需再次手動編譯妓局。
