07-webpack5學習-devServer本地開發服務

項目結構

webpackDevServer
│  package-lock.json
│  package.json
│  postcss.config.js
│  webpack.config.js
└─src
		index.css
        index.js
        index.css
           

安裝依賴

在webpackDevServer目錄下運作

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader webpack-dev-server --save-dev
           

webpack配置檔案

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exprots = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		path:resolve(__dirname,'dist'),
		filename:'[name].build.js'
	},
	module:{
		rules:[
			{
				// 比對檔案規則
				test:/\.css$/i,
				// 使用的loader
				use:['style-loader','css-loader']
			}
		]
	},
	devServer:{
		static:{
			directory:resolve(__dirname,'dist'),
		},
		liveReload:true,
		compress:true,
		port:8080,
	}，
	plugins:[
		new HtmlWebpackPlugin()
	]
}
           

本地啟動指令

• 方式一：在webpackDevServer目錄下運作

webpack-dev-server --config ./webapck.config.js
           

• 方式二：在package.json檔案的scripts屬性新增如下指令

{
	...
	"scripts":{
		"dev":"webpack-dev-server --config ./webpack.config.js"
	}
	...
}
           

修改儲存後，在webpackDevServer目錄下運作如下指令：

npm run dev