拿打包其他文件的案例接著往下 下載webpack-dev-server ``` npm i webpack-dev-server -D ``` webpack.config.js ``` //引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //resolve用來解決絕對路徑的 const {resolve} = require('path'); module.exports = { mode:'development',//development和production //打包的入口文件 entry: './src/index.js', output: { //輸出路徑，__dirname是nodejs的變量代表當前文件的目錄絕對路徑 path: resolve(__dirname, 'dist'), //打包輸出的文件名 filename: 'built.js' }, module: { //不同的文件配置不同的loader rules: [ { //匹配css文件 test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { //打包其他資源（除html/css/js以外的其他資源） //排除html/css/js ,如果使用了其他loader打包如圖片、less，則還需要加上這些排除掉 exclude:/\.(html|css|js)$/, //其實用'url-loader'穩當點，它是依賴'file-loader'的 loader: 'file-loader', options: { limit: 8 * 1024, name:'[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ], //開發服務器devserver用來自動化（自動編譯，自動打開瀏覽器，自動刷新瀏覽器） //特點只會在內存中編譯打包，不會有任何輸出 //啟動指令為：pnx webpack-dev-server devServer:{ //構建后路徑 contentBase:resolve(__dirname, 'dist'), //啟動gzip壓縮 compress:true, //端口號。被占用會自動加1 port:3000, //自動打開瀏覽器 open:true } }; ```