webpack4 vue全家桶 SPA单页应用构建案例

一直以来,对于webpack<=3来进行构建,还是比较得心应手的,然而随时技术的更新,webpack4出来了,紧随步伐,那就开始写一个webpack4的构建脚手架吧,
于是...开始了基于vue的webpack4单页构建脚手架的开发了。

1. webpack4的几大组成部分

Entry:入口,Webpack的入口文件,可以为String,Array,Object。
Output:出口,输出的最终结果,里面可以配置path、publicPath、filename、chunkFilenamet等。
Module:模块,在 Webpack 里一切皆模块,配置处理各种文件所需要的loader。
optimization:主要是做webpack3当中commonchunk所做的事件,可实现代码分离、提取公共模块等,配置更灵活也是最为复杂的一部分。
Plugin:包括内置插件及第三方插件,直接对整个构建过程起作用。

2. 目录结构

├── build
│ ├── config.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ ├── webpack.prod.conf.js
│ ├── webpack.vendor.conf.js
├── src
│ ├── components
│ ├── router
│ ├── assets
│ ├── App.vue
│ ├── main.js
│ ├── index.html
│ ├── pages
│ │ ├── accRentIncome
│ │ │ ├── images
│ │ │ ├── App.vue
│ │ │ └── index.css
│ │ ├── login
│ │ │ ├── images
│ │ │ ├── App.vue
│ │ │ └── index.css

3. spa的入口文件

entry: {
  main: [
    path.resolve(__dirname, '../src/main.js'),
  ],
}

4. 配置出口

output: {
    path: path.resolve("./dist"),
    filename: '[name].[hash:10].js', 
    chunkFilename: '[name].chunk.js'
  }

5. config文件

module.exports = {
outputBase: './dist',
port: 8091,
vendor: {

path: './node_modules/__vue-vendor-bundle__',
modules: [
  'babel-polyfill',
  'axios',
  'vue',
  'vuex',
  'vue-router',
]

},
mock: {

contentBase: './mock',
port: 8092

}
}

6. 配置开发服务器

开发模式入口文件加入webpack热更新

entry: {
    main: [
      'webpack-dev-server/client?/',
      'webpack/hot/only-dev-server'
      ]
  },
  devtool: 'cheap-module-inline-source-map',
  devServer: {
    open: false,
    clientLogLevel: 'warning',
    publicPath: '/',
    contentBase: path.resolve(__dirname,'../src'),
    port: config.port,
    host: 'localhost',
    inline: true,
    historyApiFallback: {
      index: '/'
    },
    hot: true,
    compress: true,
    proxy: config.proxy
  }

7. 预先构建动态链接库

module.exports = {
  entry: {
    vendor: config.vendor.modules
  },
  output: {
    filename: '[name]_dll_[chunkhash:10].js',
    path: path.resolve(config.vendor.path),
    library: '[name]_dll_[chunkhash:10]'
  },
  mode: process.env.NODE_ENV,
  performance: {
    hints: false
  },
  plugins: [
    new webpack.DllPlugin({
      context: process.cwd(),
      path: path.join(config.vendor.path, '[name].json'),
      name: '[name]_dll_[chunkhash:10]'
    }),
    new webpack.HashedModuleIdsPlugin()
  ]
};

8. 配置module

module: {
rules: [
  {
    test: /\.css$/,
    exclude: '/node_modules/',
    use: [
      {loader: 'vue-style-loader'}, 
      {
        loader: `css-loader`,
        options: {
          sourceMap: true,
          minimize: true  
        }
      },
      {
        loader: 'postcss-loader',
        options: {         
          plugins: () => [
              require('precss')(),
              require('postcss-cssnext')(), 
          ]
        }
      }
    ]
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    exclude: /node_modules/,
    options:{
      loaders: {
        css: ['vue-style-loader','css-loader','postcss-loader']
      }
    }
  },
  {
    test: /\.(?:woff2?|eot|ttf|svg)$/,
    loader: 'file-loader',
    options: {
      name: 'icons/[name].[ext]'
    }
  },
  {
    test: /\.(?:png|jpe?g|gif)$/,
    loaders: 
       [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: '[name].[ext]'
            }
          }
        ]
  },
]

}

9. 配置plugins

  • 生产环境下清空打包目录
new CleanWebpackPlugin([config.outputBase], {
  root: path.resolve('./'),
  verbose: true
}),
  • 产出html
    new HtmlWebpackPlugin({

    inject: true,
     title: 'test',
     template: '../src/index.html',
     filename: 'index.html',
     chunksSortMode: 'dependency',
     minify: {
       collapseWhitespace: true,
       removeComments: true,
       minifyJS: true
     }

    }),

  • 压缩css

    new OptimizeCssAssetsPlugin(),

  • 动态链接库做关联

    new webpack.DllReferencePlugin({

    context: process.cwd(),
     manifest: require(vendorManifestPath)

    })

10. 启用optimization

  • 开发环境下
    optimization:{
    namedModules: true,
    },
  • 生产环境下

    optimization:{
    hashedModuleIds:true,
    },

11. 构建速度大大提升

  • 第一次

webpack4 vue全家桶 SPA单页应用构建案例

  • 再一次

webpack4 vue全家桶 SPA单页应用构建案例

12. 项目源码

相关推荐