Webpack 多页面打包

功能

  1. 打包编译JS
  2. 压缩合并css
  3. 图片打包处理
  4. rem手机适配
  5. postcss
  6. 多页面导航生成
  7. 模块热替换

开发环境

npm run start

打包环境

npm run build

项目地址

github: https://github.com/SupaFan/webpack-dev

知识点

  • webpack js 编译 css压缩合并 html压缩 模块热替换
  • nodejs 增删目录 增加文件
  • postcss
  • fetch
  • es6

package.json

{
  "name": "sps-webpack",
  "version": "1.0.0",
  "description": "webpack打包多页面解决方案",
  "main": "webpack.config.js",
  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --progress --env.NODE_ENV=build",
   "dev": "webpack --watch --progress --color -d --env.NODE_ENV=dev",
   "start": "webpack-dev-server --watch --open --env.NODE_ENV=dev"
  },
  "keywords": [],
  "author": "https://github.com/SupaFan",
  "license": "ISC",
  "devDependencies": {
   "autoprefixer": "^7.1.4",
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-latest": "^6.24.1",
   "clean-webpack-plugin": "^0.1.17",
   "cross-env": "^5.1.1",
   "css-loader": "^0.28.7",
   "cssnano": "^3.10.0",
   "file-loader": "^0.11.2",
   "html-webpack-plugin": "^2.30.1",
   "image-webpack-loader": "^3.4.2",
   "jquery": "^3.2.1",
   "postcss-adaptive": "^0.4.0",
   "postcss-cssnext": "^3.0.2",
   "postcss-import": "^11.0.0",
   "postcss-loader": "^2.0.6",
   "style-loader": "^0.18.2",
   "sugarss": "^1.0.0",
   "url-loader": "^0.5.9",
   "webpack": "^3.5.6",
   "webpack-dev-server": "^2.9.5",
   "webpack-manifest-plugin": "^1.3.2",
   "weixin-js-sdk": "^1.2.0"
  },
  "dependencies": {}
}

webpack.config.js

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 模块映射到输出 bundle 的过程
const ManifestPlugin = require('webpack-manifest-plugin');
// 打包地址
const buildPath = path.resolve(__dirname, './dist');
// 模板地址
const templateRoot = path.resolve(__dirname, './page');
// NODEJS FS 删除文件
let emptyDir = function (fileUrl) {
  let files = fs.readdirSync(fileUrl); //读取该文件夹
  files.forEach(function (file) {
      let stats = fs.statSync(fileUrl + '/' + file);
      if (stats.isDirectory()) {
          emptyDir(fileUrl + '/' + file);
      } else {
          fs.unlinkSync(fileUrl + '/' + file);
          console.log("删除文件 " + fileUrl + ' ````' + file + "```` 成功");
      }
  });
};
// 页面入口
const pageEntry = {};
// 页面模板
const pageHtml = [];
// 导航JSON
const navigation = {
  "navList": []
};
// 检查是否有打包目录
!fs.existsSync(buildPath) && fs.mkdirSync(buildPath);
// 读取文件目录
const pages = fs.readdirSync(templateRoot)
pages.forEach((name, index) => {
  // 页面入口配置
  const enterPath = path.join(templateRoot, name)
  pageEntry[name] = path.join(enterPath, 'entry.js')

  // 输出页面模板
  pageHtml.push(new HtmlWebpackPlugin({
    entryName: name,
    filename: `${name}.html`,
    template: `${enterPath}/index.html`,
    inject: false,
    minify: {
      removeComments: true,
      collapseWhitespace: true
    },
    chunks: ['main', 'common', name]
  }))

  // 输出导航JSON
  navigation.navList.push({
    "name": name,
    "href": `/${name}.html`
  })
  fs.writeFileSync(path.resolve(__dirname, './Navigation.json'), JSON.stringify(navigation));
})

module.exports = env => {
  const config = {publicPath: '/'}
  emptyDir(buildPath)
  if (env.NODE_ENV === 'build') {
    config.publicPath = './'
  }
  return {
    entry: Object.assign(pageEntry, {
      main: './public/main.js'
    }),
    // devtool: false,
    devtool: 'source-map',
    devServer: {
      contentBase: path.resolve(__dirname, './'),
      compress: true,
      inline: true,
      hot: true, // 模块热替换
      port: 9000,
    },
    plugins: [
      new ManifestPlugin(),
      new webpack.HotModuleReplacementPlugin(), // 模块热替换
      new webpack.optimize.CommonsChunkPlugin({ // 公共模块提取
        name: 'common'
      }),
      // 清理 项目之外无法清理 用nodejs清理文件
      // new CleanWebpackPlugin(buildPath),
    ].concat(pageHtml),
    output: {
      filename: 'js/[name]-[hash].bundle.js',
      path: buildPath,
      publicPath: config.publicPath
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
          ]
        }, {
          test: /\.(png|jpg|gif)$/,
          use: [
            'url-loader?limit=20000&name=[name]-[hash].[ext]&outputPath=images/',
            'image-webpack-loader'
          ]
        }, {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: ['file-loader']
        },
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['latest']
            }
          },
          exclude: '/node_modules/',
          include: '/src/',
        }
      ]
    }
  }
}

正在做的一个项目 守财鹿 有兴趣了解下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容