webpack之带有可自动打开浏览器及热重载的基本配置 (2)

webpack-dev-server依赖的基本配置config/index.js如下:

module.exports = { dev: { assetsPublicPath: 'http://www.likecs.com/', // 相对文件路径 proxyTable: {}, host: 'localhost', port: '3000', autoOpenBrowser: true, // 是否自动打开浏览器 devtool: 'eval-source-map', // Source Maps } }

项目依赖的插件package.json基本配置如下:

{ "name": "webpackproject", "version": "1.0.0", "description": "webpacksimpleproject", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --inline", "dev": "webpack --mode development", "build": "webpack --mode production" }, "dependencies": { "webpack": "^4.2.0" }, "devDependencies": { "autoprefixer": "^8.2.0", "babel-core": "^6.26.0", "babel-loader": "^8.0.0-beta.2", "babel-preset-env": "^2.0.0-beta.2", "copy-webpack-plugin": "^4.5.1", "css-loader": "^0.28.11", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.1.0", "image-webpack-loader": "^4.2.0", "imagemin-webpack-plugin": "^2.1.0", "less": "^3.0.1", "less-loader": "^4.1.0", "node-sass": "^4.8.3", "postcss-loader": "^2.1.3", "sass": "^1.0.0-rc.1", "sass-loader": "^6.0.7", "style-loader": "^0.20.3", "url-loader": "^1.0.1", "webpack-cli": "^2.0.13", "vue-loader": "^15.2.4", "webpack-dev-server": "^3.1.4", "clean-webpack-plugin": "^0.1.19", "open-browser-webpack4-plugin": "1.0.0" }, "author": "tnnyang", "license": "ISC" }

以上就是webpack的基本配置,里边的注释详细介绍了各配置的功能。当运行npm start后,DEMO项目会自动在浏览器中打开并可实现热重载。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdzfz.html