webapck4+vue搭建的小型简单架构

webpack4的一些常用配置，只做了解学习使用
适用于单页面，以Vue为例讲解

github：https://github.com/zshsats/vueFile
使用webpack4+vue搭建的前台项目，并实现了两个小组件和栅格布局

配置包括，异步加载，打包对字体，图片的处理，剔除无用的css，压缩，复制到静态文件，.vue的解析，es6->es5配置等
喜欢的可以给个start

1. 输出目录
   const Home= () => import(’./modules/home/home.js’);
   异步加载需要在output中配置chunkFilename

 output:{
        filename: 'js/[name].js',  //存放的指定文件夹
        chunkFilename: 'js/chunk/[name].js', //存放异步加载的文件
        publicPath: '/',
        path:path.resolve(__dirname,"dist")
    },

2.打包输出文件名
import(/* webpackChunkName: ‘home’ */’./modules/home/home.js’)
通过webpackChunkName定义打包后的文件名
3.打包生产环境，可以为文件名加上hash串防止浏览器缓存而页面没及时更新问题
[name]-[hash].js

4.图片和字体
使用html-loader解析html中的img引入图片打包问题

            {
                test: /\.(html|tpl)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: ['img:src', 'img:data-src', 'audio:src','link:href'],
                        minimize: true
                    }
                }
            }

打包图片字体到指定文件夹配置

{
                test: /\.(woff|svg|eot|ttf)\??.*$/,
                use:[
                    {
                        loader: 'url-loader',
                        options:{
                            limit: 8192,
                            name:'assets/fonts/[name].[ext]',
                            publicPath:"/"
                        }
                    }

                ]

            },
            {
                test: /\.(png|jpg|gif|svg|ico)$/i,//正则表达式匹配图片规则
                use: [
                    {
                        loader:'url-loader',

                        options:{
                            limit: 8192, 
                            name:'[name].[ext]',//images:图片打包的文件夹；
                            outputPath:"assets/images",
                            publicPath:"/assets/images"
                        }
                    }
                ]
            },

4.es6转es5 使用transform-runtime
“corejs”: false,配置false只会引用使用的部分，设置成2可以避免全局污染

 "plugins": [
        "@babel/plugin-syntax-dynamic-import",
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": false,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]