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为样式处理配置文件