通天妖文：打包其他资源 && 开发服务器

　　打包其他资源（其他配置再写一遍，就当温习，代码还是要多敲，毕竟脑子这个东西不咋滴！）

　　const { resolve } = require("path");　　//建议学webpack前还是学习下node.js,毕竟里面会用到里面的属性和方法

　　const HtmlWebpackPlugin = require("html-weboack-plugin");

　　module.exports = {　　　　　　　　

　　　　entry:"./src/index.js",

　　　　output:{

　　　　　　filename:"built.js",

　　　　　　path:resolve(__dirname,"build")

　　　　},

　　　　//loader

　　　　module:{

　　　　　　rules:[

　　　　　　　　{

　　　　　　　　　　test:/\.css$/,

　　　　　　　　　　use:["style-laoder","css-loader"]

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　　test:/\.less$/,

　　　　　　　　　　use:["style-loader","css-loader","less-loader"]

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　　test:/\.(jpg|png|gif)$/,

　　　　　　　　　　laoder:"url-loader",　　// 需要依赖：url-loader 、file-loader

　　　　　　　　　　options:{

　　　　　　　　　　　　limit: 8 * 1024,

　　　　　　　　　　　　esModule:false,

　　　　　　　　　　　　outputPath:"imgs",　　

　　　　　　　　　　　　name:"[hash:10].[ext]"

　　　　　　　　　　}

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　　test:/\.html$/,

　　　　　　　　　　loader:"html-loader",

　　　　　　　　　　options:{

　　　　　　　　　　　　esModule:false

　　　　　　　　　　}

　　　　　　　　},

　　　　　　　　{

　　　　　　　　　exclude:/\.(html|js|css|less|png|jpg|gif)$/,　　//以为要打包其他资源，所以需要排除一些像html|js|css|img之类的资源

　　　　　　　　　laoder:"file-loader",

　　　　　　　　　options:{

　　　　　　　　　　name:"[hash:10].[ext]"

　　　　　　　　　}

　　　　　　　　}

　　　　　　]

　　　　},

　　　　plugins:[

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　template:"./index.html"

　　　　　　})

　　　　],

　　　　mode:"development"

　　}　　

　开发服务器

　　devServer：开发服务器，不属于【五大神将】，作用：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

　　特点：只会在内存中编译打包，不会有任何输出（开发测试的时候很方便）

　　依赖：webapck-dev-server

　　指令：npx webpack server

　　devServer:{

　　　　contentBase:resolve(__dirname,"build"),　　// 项目构建后的路径

　　　　compress:true,　　//启动压缩

　　　　open:true,　　　　//首次执行指令，自动打开浏览器

　　　　port:8888,　　　　//端口号

　　}

魔障1:添加target:"web"

魔障2：如果执行命令了报错：Error: getaddrinfo ENOTFOUND localhost 而没有打开页面

 请检查你否绑定了host ,localhost没有绑定127.0.0.1执行命令是不会自动打开页面的　　

武功秘籍：

　　package.json里scripts添加启动配置

　　例如："dev": "webpack serve --mode development"

　　可执行npm run dev 运行项目

webpack自学文档 --3 打包其他资源 && 开发服务器(webpack-dev-serve页面不刷新问题=>fix)