webpack4.x从0开始构建多页项目(一)-项目说明

webpack4比webpack3多了一个webpack-cli，它把一些内置的模块都迁移到这个webpack-cli里面去了

webpack4.x从0开始构建多页项目(一)-项目说明.

webpack4.x从0开始构建多页项目(二)-多页实现.

webpack4.x从0开始构建多页项目(三)-插件及loader配置.

实现功能

1. 根据src中pages的文件夹自动生成多页面。

2. 自动打包html对应的js，并将打包压缩后的js自动写到对应html的script标签里面。

3. 使用用ES6及ES7的async await。

4. 希望用scss开发，并且将scss转译成css后压缩；自动将css从js自动分离出来加入到对应html页面中的link标签中，自动给css加浏览器兼容性的前缀

5. 能够在本地启动一个服务

github地址

由于插件版本不一样可能会出现一些问题；附上我的package.json文件：

{"name": "webpackpages","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js","build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"},"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.1.2","@babel/plugin-transform-runtime": "^7.1.0","@babel/preset-env": "^7.1.0","autoprefixer": "^9.6.1","babel-loader": "^8.0.4","clean-webpack-plugin": "^0.1.19","copy-webpack-plugin": "^5.0.4","cross-env": "^5.1.5","css-loader": "^3.2.0","expose-loader": "^0.7.5","file-loader": "^4.2.0","glob": "^7.1.3","html-loader": "^0.5.5","html-webpack-plugin": "^3.2.0","html-withimg-loader": "^0.1.16","image-webpack-loader": "^3.6.0","mini-css-extract-plugin": "^0.8.0","node-sass": "^4.12.0","optimize-css-assets-webpack-plugin": "^5.0.3","postcss-import": "^12.0.1","postcss-loader": "^3.0.0","purify-css": "^1.2.5","purifycss-webpack": "^0.7.0","sass-loader": "^7.2.0","style-loader": "^1.0.0","uglifyjs-webpack-plugin": "^2.2.0","url-loader": "^2.1.0","webpack": "^4.29.6","webpack-cli": "^3.1.1","webpack-dev-server": "^3.8.0","webpack-merge": "^4.1.2"},"dependencies": {"@babel/runtime": "^7.1.2","babel-polyfill": "^6.26.0"},"browserslist": ["ie >= 8","Firefox >= 20","Safari >= 5","Android >= 4","Ios >= 6","last 4 version"]
}

项目目录：

QQ截图20190910150958.png

1. build为webpack的配置文件夹

   webpack.base.conf.js ——开发环境和生产环境公共配置

   webpack.dev.conf.js ——开发环境配置

   webpack.prod.conf.js ——生产环境配置

   webpack.rules.conf.js ——loader配置文件

2. dist为生产环境打包文件夹夹，即打包完成后放入服务器的文件

3. src为开发文件夹

   3.1 assets中的文件会经过 webpack 打包，重新编译；

   3.2 page为开发页面，每新建一个页面都创建一个文件夹并在其文件夹中新建index.html，index.js，index.scss文件。

4. static目录下的文件会被直接复制到最终的打包目录下面(默认是 dist/static )，且必须使用绝对路径来引用这些文件。static中建议放一些外部第三方，自己的文件放在assets，别人的放在static中。

5. .babelrc为es6配置文件

6. postcss.config.js为样式处理配置文件