webpack4 构建vue多页工程

多页应用开发环境配置

构建开发环境的配置，需要使用到webpack-dev-server，以及webpack4中的mode配置和devServer。

而多页应用的开发则需要使用到html-webpack-plugin这个插件，来构建html

项目的目录结构

-- src
  |-- views
    |-- home
      |-- index.js
      |-- index.html
      |-- index.vue

多页面的entry和页面的构建打包

const setMPA = () => {
  const entrys = {};
    const htmlWebpackPlugins = [];
    
    const entryFiles = glob.sync(path.join(__dirname, "src"));
    
    Object.keys(entryFiles)
      .map((index) => {
        const entry = entryFiles[index];
        
          const match = entry.match(/src\/views\/(.*)\/index\.js/);        
          const pageName = match && match[1];
        
          entrys[pageName] = entry;
          htmlWebpackPlugins(
              new HtmlWebpackPlugin({
                  fileName: `${pageName}.html`,
                    template: path.join(__dirname, `src/views/${pageName}/index.html`),
                    title: `${pageName} title`
                })
            )
      })
    
    return {
      entrys,
        htmlWebpackPlugins
    }
}

webpack.dev.js 开发环境的配置

// webpack.dev.js
const path = require('path');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');

const setMPA = () => {
	const entrys = {};
    const htmlWebpackPlugins = [];
    
    const entryFiles = glob.sync(path.join(__dirname, "src"));
    
    Object.keys(entryFiles)
    	.map((index) => {
    		const entry = entryFiles[index];
        
        	const match = entry.match(/src\/views\/(.*)\/index\.js/);        
        	const pageName = match && match[1];
        
        	entrys[pageName] = entry;
        	htmlWebpackPlugins(
            	new HtmlWebpackPlugin({
                	fileName: `${pageName}.html`,
                    template: path.join(__dirname, `src/views/${pageName}/index.html`),
                    title: `${pageName} title`
                })
            )
    	})
    
    return {
    	entrys,
        htmlWebpackPlugins
    }
}

const { entrys, htmlWebpackPlugins } = setMPA();

module.exports = {
	mode: 'development',
    entry: entrys,
    output: {
    	filename: 'static/js/[name].js',
        path: path.posix.join(__dirname, 'dist')
    },
    resolve: {
    	alias: {
        	'@': path.join(__dirname, 'src')
        }
    },
    module: {
    	rules: [
            {
            	test: /\.js$/,
                use: 'babel-loader'
            },
            {
            	test: /\.vue$/,
                use: 'vue-loader'
            },
            {
            	test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                    	loader: 'url-loader',
                        options: {
                        	name: 'images/[name].[ext]',
                            limit: 10240
                        }
                    }
                ]
            },
            {
            	test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                    	loader: 'file-loader',
                        options: {
                        	name: 'fonts/[name].[ext]'
                        }
                    }
                ]
            },
            {
            	test: /\.css$/,
                use: [
                	'vue-style-loader',
                    'css-loader'
                ]
            },
            {
            	test: /\.less$/,
                use: [
                	'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
            	test: /\.styl(us)?$/,
                use: [
                	'vue-style-loader',
                    'css-loader',
                    'stylue-loader'
                ]
            }
        ]
    },
    plugins: [
    	new VueLoaderPlugin(),
        // 热加载
        new webpack.HotModuleReplacementPlugin()
    ].concat(htmlWebpackPlugins),
    devServer: {
    	contentBase: path.join(__dirname, 'dist'),
        hot: true
    }
}

babelrc的配置，应用与编译ES的语法

/* .babelrc  */
{
  "presets": [
    "@babel/perset-env"
  ]
}

浏览器的兼容版本，>1%==市场的使用份额大于1%

/* .browserslistrc  */
last 2 version
>1%
IOS 7

正式环境配置

vue的正式环境需要配置mode: production，默认开启UglifyJsPlugin（js代码压缩）。

正式环境的资源hash迭代（hash、chunkhash、contenthash）

使用loader配置资源的提取，针对样式的提取使用mini-css-extract-plugin插件去提取，配合html-webpack-plguin把提取出来的css[chunk]配置进去html中

告警信息人性化，使用插件@soda/friendly-errors-webpack-plugin，

/**
 * font and image 资源  --> hash
 * 从js提取出font和image资源
 */
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name]_[hash:8].[ext]',
              limit: 10240 // 10k https://www.npmjs.com/package/url-loader#limit
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eof|ttf|tof)$/,
        use: [
          {
            loader: 'file-loader', // https://www.npmjs.com/package/file-loader#name
            options: {
              name: '[name]_[hash:8].[ext]' // https://www.npmjs.com/package/file-loader#placeholders
            }
          }
        ]
      }
    ]
  }
}

sass 预处理器，配置时需要注意, css 样式处理，使用到contenthash

 /**
 * css --> contenthash 当css的内容没有任何改变，不会随着js[chunkhash]的改变而改变
 * 遵从js的chunkhash
 * 从js中提取出css到文件中
 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              fiber: require('fibers'),
              implemation: require('sass'),
              // indentedSyntax: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.styl(us)?$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  },
  plugins: [
    // https://www.npmjs.com/package/mini-css-extract-plugin
    // 提取出css
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    })
  ]
}

const path = requrie('path');
const HtmlWebpackPlguin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
const webpack = require('webpack');

const setMPA = () => {
  const entrys = {};
    const htmlWebpackPlugins = [];
    
    const entryFiles = glob.sync(path.join(__dirname, "src"));
    
    Object.keys(entryFiles)
      .map((index) => {
        const entry = entryFiles[index];
        
          const match = entry.match(/src\/views\/(.*)\/index\.js/);        
          const pageName = match && match[1];
        
          entrys[pageName] = entry;
          htmlWebpackPlugins(
              new HtmlWebpackPlugin({
                  fileName: `${pageName}.html`,
                    template: path.join(__dirname, `src/views/${pageName}/index.html`),
                    title: `${pageName} title`
                })
            )
      })
    
    return {
      entrys,
        htmlWebpackPlugins
    }
}

const { entrys, htmlWebpackPlguins } = setMPA(); 

module.exports = {
  mode: 'production',
    entry: entrys,
    output: {
      filename: '[name]_[chunkhash:8].js',
        path: path.join(__dirname, 'dist')
    },
    resolve: {
        // 配置文件夹的别名
      alias: {
          '@': path.join(__dirname, 'src')
        }
    },
    module: {
      rules: [
            {
              test: /\.js$/,
                use: 'babel-loader'
            },
            {
              test: /\.vue$/,
                use: [
                    'cache-loader',
                    'vue-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      name: '[name]_[hash:8].[ext]',
                      limit: 10240 // 10k https://www.npmjs.com/package/url-loader#limit
                    }
                  }
                ]
            },
            {
                test: /\.(woff|woff2|eof|ttf|tof)$/,
                use: [
                    {
                        loader: 'file-loader', // https://www.npmjs.com/package/file-loader#name
                        options: {
                            name: '[name]_[hash:8].[ext]' // https://www.npmjs.com/package/file-loader#placeholders
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                  'css-loader'
                ]
            },
            {
                test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            fiber: require('fibers'),
                            implemation: require('sass'),
                            // indentedSyntax: true
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(), // vue-loader15版本之后，需要添加添加此插件
        // 重新打包是清除打包的内容
        new CleanWebpackPlugin(),
        // 提取css
        new MiniCssExtractPlugin({
          filename: '[name]_[contenthash:8].css'
        }),
        // https://www.npmjs.com/package/@soda/friendly-errors-webpack-plugin
        new FriendlyErrorsWebpackPlugin()
    ].concat(htmlWebpackPlugins)
}