Webpack4.x安裝與使用入門
阿新 • • 發佈：2019-01-05
安裝
在全域性安裝webpack
npm install -g webpack建立專案
建立新資料夾webpack-study，用於存放專案。命令列定位到該資料夾下。輸入以下命令進行初始化。
npm init然後根據專案情況配置選項或直接回車。
此時發現在該資料夾內新增了一個package.json檔案。
安裝webpack依賴包
npm install --save-dev webpack在webpack-study資料夾下建立兩個資料夾，app和public。
並分別建立以下檔案。
module.exports = function() { let greet = document.createElement('div'); greet.textContent = 'Hi winnw!'; return greet; }
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());<!DOCTYPE html> <html> <head> <mata charset="utf-8"> <title>my first webpack</title> </head> <body> <div id="root"> hello world! </div> <script type="text/javascript" src="bundle.js"></script> </body> </html>
建立webpack.config.js
// __dirname是node.js的全域性變數，它指向當前執行指令碼所在的目錄。 module. exports ={ devtool: 'eval-source-map', entry:__dirname + '/app/main.js', output:{ path:__dirname+'/public', filename:'bundle.js' }, mode:'development', devServer: { contentBase: "./public",//本地伺服器所載入的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時重新整理 } /*, module:{ loaders:[ { test:/\.css$/, loaders:['style-loader','css-loader'] } ] }*/ }
打包
webpackThe CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -Dnpm install -g webpack-cli可在public資料夾下看到buddle.js