背景
目前负责前端专题活动开发。由于专题有很强的独立性与实效性,最初前端将每个专题都构建成一个独立的单页面项目,这样每开发一个专题就需要复制一遍项目结构。不仅工作重复代码冗余,而且远程仓库内容越来越多,不利于管理。因此,我选择了多页面应用,一个专题就是项目中的一个独立的目录,不需要每次重复构建。
该多页面需要实现的功能:
- 自动打包 html 对应的 js,css,图片
- 希望用 ES6 的语法
- 希望用 scss 开发,而不是一直复制 css,并且将 scss 转译成 css 后自动将 css 从 js 自动分离出来,自动给 css 加浏览器兼容性的前缀
- 能够在本地启动一个服务,并且每次保存之后浏览器自动刷新
下面开始我的多页面项目构建。
首先创建一个 package.json 的文件:
{
"name": "webpack-4",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^1.0.0",
"eslint": "^5.15.0",
"eslint-loader": "^2.1.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"optimize-css-assets-webpack-plugin": "^5.0.0",
"postcss-loader": "^2.1.6",
"sass-loader": "^7.1.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"node-sass": "^4.11.0"
},
"browserslist": [
"last 1 version"