基於webpack4.x工程配置

基於webpack4.x工程配置

初始化配置

entry 入口文件

{

index： 『』

}

output output: { // 輸出文件名稱以及路徑

filename: code-editor.js,

path: path.join(__dirname, "bundle"),

}

mode配置

module: {

rules: [

{ // css模塊處理

test: /.css$/,

use: [

style-loader, css-loader

]

}

]

}

生成的js自動注入到html中

//安裝html-webpack-plugin

npm install html-webpack-plugin --save-dev

//安裝webpack webpack-cli

npm install webpack webpack-cli --save-dev

配置 webpack.config.js

plugins: [

new HtmlWebpackPlugin({

filename: index.html,

template: ./index.html,

})

]

配置編譯前清空bundle文件

npm install clean-webpack-plugin --save-dev

config配置 new CleanWebpackPlugin([dist]),

熱更新配置

npm install webpack-dev-server --save-dev

new webpack.HotModuleReplacementPlugin()

devServer: {//配置此靜態文件伺服器，可以用來預覽打包後項目

inline:true,//打包後加入一個websocket客戶端

hot:true,//熱載入

contentBase: path.resolve(__dirname, dist),//開發服務運行時的文件根目錄

host: localhost,//主機地址

port: 9090,//埠號

compress: true//開發伺服器是否啟動gzip等壓縮

},

"scripts": {

"start": "webpack-dev-server --mode development"

},

推薦閱讀：