webpack4配置Vue多頁面入口輕量級模板

前言

之前寫過一次關於webpack配置多頁面應用,寫的不是很好,這次項目要用到多頁面應用,於是重新基於webpack4構建了一套關於vue的多頁面應用。我在網上搜索了一圈，發現vue多頁面配置，大部分都是基於vue-cli配置的，很少是從基礎開始配置，如是我通過webpack4,構建了一個提供多頁面入口，打包，調試的輕量級的構建工具，不依賴過多配置，只加載常用的配置，用更少的代碼，做更多的東西

項目結構

├── build                                       // webpack配置目錄
│   ├── webpack.config.base.js                     // 公共配置
│   ├── webpak.config.dev.js                    // 開發模式
│   ├── webpak.config.prod.js                   // 打包模式
├── dist                                        // 項目打包路徑(自動生成)
├── page                                        // 多頁面入口(自定義)
├── public                                      // index.html模板
├── src                                         // 源碼目錄(自定義)
├── postcss.config                              // 樣式添加前綴
├── pages.js                                    // 多頁面配置項

項目運行

克隆項目

git clone [email protected]:hangjob/vue-multiple-webpack4-template.git

安裝依賴

npm install  或 yarn

開發模式

npm run dev

裏面已經寫好了兩個入口文件，啓動後可直接訪問
http://localhost:3000/home.html
http://localhost:3000/login.html

打包模式

npm run build

打包後生成文件dist目錄

文件解釋

關於build中使用的插件項在文件配置後面註釋寫的都很清楚

• 多頁面配置項(pages.js)

  pages: [
      {
          page: 'home',
          entry: path.resolve(__dirname, './page/home.js'), //指向入口文件
          title: '這是頁面1',
          template: path.resolve(__dirname, './public/index.html'), //指向模板文件
          filename: 'home.html',
          chunks: ['home','common'], // 引入公共模塊common
      },
      {
          page: 'login',
          entry: path.resolve(__dirname, './page/login.js'),  //指向入口文件
          title: '這是頁面2',
          template: path.resolve(__dirname, './public/index.html'), //指向模板文件
          filename: 'login.html',
          chunks: ['login'],
      }
  ]
  

• webpack.config.dev.js 開發模式

  mode: 'development',
  devtool: 'cheap-module-eval-source-map',// 原始代碼（只有行內）,但是更高的質量和更低的性能
  watch: true,
  watchOptions: {
    poll: 1000, //每秒監控訊問次數
    aggregateTimeout: 500, //防抖
    ignored: '/node_modules/' //忽略監控文件 
  },
  devServer:{
      port: 3000,
      hot: true,
      progress: false, //記錄條
      contentBase: path.resolve(__dirname, '../public'), //表示的是告訴服務器從哪裏提供內容
      compress: true //開啓gzip壓縮
  }

• webpack.config.prod.js 生產模式

  ode: 'production',
  devtool: 'cheap-module-source-map',// 原始代碼（只有行內）每行代碼從loader中進行映射
  plugins: [
      new CleanWebpackPlugin(['dist'], { 
          root: path.resolve(__dirname, '..'),
          dry: false // 啓用刪除文件
      })
  ],
  optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true, //啓用緩存並且啓用多進程並行運行
          sourceMap: true  //錯誤消息位置映射(減慢編譯速度),線上錯誤方便查看
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
  }

• webpack.config.base.js 公共模塊

  optimization: {
      splitChunks: {
          cacheGroups: {
              // 將 `node_modules`目錄下被打包的代碼到`common/common.js`
              common: {
                  test: /node_modules/,
                  chunks: "initial",  //只對入口文件處理
                  name: "common", //配置公共模塊名稱
                  minChunks: 2, //表示被引用次數，默認爲1,比如在項目中有2處引用到一樣的模塊就會抽離到公共模塊下
                  maxInitialRequests: 5, // 最大的初始化加載次數，默認爲1
                  minSize: 0 //表示在壓縮前的最小模塊大小，默認爲0
              }
          }
      }
  }

   網絡下載太慢,請使用淘寶鏡像

• 1.臨時使用

  npm --registry https://registry.npm.taobao.org install express

• 2.持久使用

  npm config set registry https://registry.npm.taobao.org

  配置後可通過下面方式來驗證是否成功

  npm config get registry 或者 npm info express

• 3.通過cnpm使用

  npm install -g cnpm --registry=https://registry.npm.taobao.org

說明

github地址，後面會持續更新，如果對您有幫助，您可以點右上角 "Star" 支持一下 謝謝！ ^_^
如要在編譯過程中遇到錯誤，點擊聯繫作者

感謝這些文章提供幫助

項目有使用到這些文章的我都註釋過
webpack中的path、publicPath和contentBase
mini-css-extract-plugin
webpack4 splitChunksPlugin && runtimeChunkPlugin 配置雜記
Vue Loader