和网站开发公司如何签合同,怎么做和京东一样网站,东莞网站建设地点优化,wordpress评论提交慢开发服务器自动化 每次写完代码都需要手动输入指令才能编译代码#xff0c;太麻烦了#xff0c;我们希望一切自动化#xff0c;即修改代码后服务器浏览器自动刷新。 1. 下载包 npm i webpack-dev-server -D2. 配置 webpack.config.js const path require(p…开发服务器自动化 每次写完代码都需要手动输入指令才能编译代码太麻烦了我们希望一切自动化即修改代码后服务器浏览器自动刷新。 1. 下载包 npm i webpack-dev-server -D2. 配置 webpack.config.js const path require(path); const ESLintWebpackPlugin require(eslint-webpack-plugin); const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true, // 自动将上次打包目录资源清空},module: {rules: [{// 用来匹配 .css 结尾的文件test: /.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},{test: /.less$/,use: [style-loader, css-loader, less-loader],},{test: /.s[ac]ss$/,use: [style-loader, css-loader, sass-loader],},{test: /.styl$/,use: [style-loader, css-loader, stylus-loader],},{test: /.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},{test: /.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),],// 开发服务器devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器},mode: development, };3. 运行指令 npx webpack serve注意运行指令发生了变化 并且当你使用开发服务器时所有代码都会在内存中编译打包并不会输出到 dist 目录下。 开发时我们只关心代码能运行有效果即可至于代码被编译成什么样子我们并不需要知道。