因開發的web程式愈來愈複雜，webpack是當用來建構web程式的管理工具，基本的使用方法介紹如下:
一、安裝webpack
至https://nodejs.org下載node.js
二、創立web模組化開發專案
1.新建一目錄
2.執行npm init
三、安裝webpack至開發專案
npm i -D webpack
或npm install –save-dev webpack webpack-cli
–save-dev同-D，指的是將安裝模組保存到package.json的devDependencies
另若要指定版本請用npm install –save-dev webpack@
要安裝最新的體驗版請用npm install –save-dev webpack@beta
要將webpack安裝至全域未來都可使用請用npm i -g webpack，
但建議不要安裝至全域以利未來不同專案可用不同版本
四、webpack各檔案簡介，舉例說明
|– dist |– index.html |– main.bundle.js
|– src |– main.js |– helper.js
|– webpack.config.js
|– package.json
1.webpack.config.js
const path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/main.js'
],
output: {
filename: 'main.bundle.js',
path: path.resolve(__dirname, './dist'),
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './dist/index.html'
})
],
module: {
},
devServer: {
contentBase: './dist',
hot: true
}
}
2.main.js
import helplers from './helpler.js';
helplers.showlog('webpack 初始化');
3.helper.js
export default {
showlog(msg) {
console.log('您輸入的資料: ' + msg);
}
}
4.package.json
{
"name": "webpack01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev" : "webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC"
}
5.build webpack
指令 npm run build
五、安裝開發Server:
1.https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/WebpackDevServer.html
2.執行chrome debug: npm run dev
六、範例下載
https://github.com/yahuihuang/webpack01
葛麗絲的分享世界 