[聚合文章] 用webpack构建的多页应用项目模板(架构)

  1. 首页
  2. 聚合文章
  3. 文章详情
JavaScript 2017-11-24 30 阅读
原文链接: https://www.jianshu.com/p/eadea5d27f0c
项目结构

此项目的使用方法：

  #以下命令均可在package.json和deploy.sh中进行配置  #开发环境下运行  npm run dev  #使用Eslint进行代码检测  npm run lint  #打包构建  npm run build  #服务器环境下预览  npm run serve    #以下命令不需要运行 npm run build，此脚本会自动帮你运行  #自动打包部署到测试环境  sudo sh ./deploy.sh build dev  #自动打包部署到生产环境  sudo sh ./deploy.sh build prod  #如果服务器中没有对应的目录，你可以运行下面的代码在部署时自动在服务器上生成一个目录  sudo sh ./deploy.sh build prod(or dev) newDir

首先你需要使用npm来下载一些依赖，这对于经常使用npm的同学来说并不陌生，具体的一些依赖在package.json文件里：

{  "name": "webpack-template",  "version": "1.0.0",  "description": "webpack template",  "private": true,  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --colors",    "build": "cross-env NODE_ENV=prod webpack -p",    "lint": "cross-env NODE_ENV=lint webpack-dev-server --open",    "serve": "http-server ./dist -p 8888 -o"  },  "author": "",  "license": "ISC",  "devDependencies": {    "autoprefixer": "^7.2.4",    "babel-core": "^6.26.0",    "babel-loader": "^7.1.2",    "babel-plugin-transform-es2015-spread": "^6.22.0",    "babel-preset-env": "^1.6.1",    "clean-webpack-plugin": "^0.1.17",    "cross-env": "^5.1.3",    "css-loader": "^0.28.7",    "eslint": "^4.14.0",    "eslint-loader": "^1.9.0",    "extract-text-webpack-plugin": "^3.0.2",    "file-loader": "^1.1.6",    "html-loader": "^0.5.4",    "html-webpack-plugin": "^2.30.1",    "http-server": "^0.10.0",    "postcss-loader": "^2.0.10",    "style-loader": "^0.19.1",    "url-loader": "^0.6.2",    "webpack": "^3.10.0",    "webpack-dev-server": "^2.9.7",    "webpack-merge": "^4.1.1"  }}

在使用时，你只需要npm install就可以了。

项目中，webpack.config.js为webpack的配置文件，当你在命令行中输入具体的命令时，由它来进行一些任务分配，具体的代码为:

// 获取环境命令，并去除首尾空格const env = process.env.NODE_ENV.replace(/(\s*$)|(^\s*)/ig,"");// 根据环境变量引用相关的配置文件module.exports = require(`./config/webpack.config.${env}.js`)

在config/config.js中,用来保存一些全局的变量，比如要进行打包的html模板，一些路径等信息，在这里我只配置了html模板：

/** * 全局配置文件 */ module.exports = {   // 项目中的html文件，不需要后缀   HTMLDirs:[       "a",  //a.html       "b"  //b.html   ] }

config/webpack.config.base.js是webpack的基本配置，包括打包编译时的模板配置，loaders、打包输出路径等信息:

/** * webpack 基础配置 */const webpack = require('webpack');const path = require("path");// 引入模板插件const HTMLWebpackPlugin = require("html-webpack-plugin");//  环境变量const env = process.env.NODE_ENV// 提取js中的cssconst ExtractTextPlugin = require('extract-text-webpack-plugin')// 引入config.jsconst config = require("./config");// 通过 html-webpack-plugin 生成的 HTML 集合let HTMLPlugins = [];// 入口文件集合let Entries = {}// 生成多页面的集合config.HTMLDirs.forEach((page) => {  const htmlPlugin = new HTMLWebpackPlugin({    filename: `${page}.html`,    template: path.resolve(__dirname, `../src/page/${page}.html`),    chunks: [page, 'commons'],    minify: {      "removeAttributeQuotes": true,      "removeComments": true,      "removeEmptyAttributes": true,    }  });  HTMLPlugins.push(htmlPlugin);  Entries[page] = path.resolve(__dirname, `../src/javascript/${page}.js`);})module.exports = {  // 入口文件  entry: Entries,  // 启用 sourceMap  devtool: "cheap-module-source-map",  // 输出文件  output: {    filename: "javascript/[name].bundle.[hash].js",    path: path.resolve(__dirname, "../dist"),    publicPath: '/'  },  resolve: {    extensions: ['.js'] // 配置简写，配置过后，书写该文件路径的时候可以省略文件后缀  },  // 加载器  module: {    rules: [{        test: /\.html$/,        use: [{          loader: 'html-loader',          options: {            attrs: ['img:src', 'link:href'],            interpolate: true          }        }]      },       {        // 对 css 后缀名进行处理        test: /\.css$/,        // 不处理 node_modules 文件中的 css 文件        exclude: /node_modules/,        /* 内嵌style形式 */        // use: [{        //   loader: 'style-loader'        // }, {        //   loader: 'css-loader',        //   options: {        //     // 开启 css 压缩        //     minimize: true,        //   }        // }]        /* link形式 (按照官方配置css内图片不能加载，待解决) https://doc.webpack-china.org/loaders/style-loader*/        // use: [        //   { loader: "style-loader/url" ,options: { convertToAbsoluteUrls: true }},        //   { loader: "file-loader", options: { outputPath: 'css/'}},        // ]        /* link打包之后引入对应的css形式(dev模式下为内嵌style形式) */        use: env === 'prod'          ? ExtractTextPlugin.extract({            fallback: 'style-loader',            use: ['css-loader']          })          : ['style-loader', 'css-loader']      },      {        test: /\.js$/,        exclude: /node_modules/,        use: [{          loader: 'babel-loader',          options: {            presets: ['env']          }        }],      },      {        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,        use: [{          loader: "url-loader",          options: {            limit: 10000,            // 打包生成图片的名字            name: "image/[name].[hash].[ext]",          }        }],      },      {        test: /\.(woff|woff2|eot|ttf|otf)$/,        use: ["url-loader"]      }    ],  },  // 插件  plugins: [    // new webpack.BannerPlugin('Created by YourName.')    // 自动生成 HTML 插件    ...HTMLPlugins  ],}

config/webpack.config.base.js和config/webpack.config.dev.js分别为生产环境和测试环境下的配置，config/webpack.config.lint.js是使用ESlint对代码进行检查的配置，具体可在github中查看,使用方法和教程都在上面，欢迎大家提issue！

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。