拿打包其他文件的案例接着往下 下载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 } }; ```