脚本宝典收集整理的这篇文章主要介绍了webpack4 vue全家桶 SPA单页应用构建案例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一直以来,对于webpack<=3来进行构建,还是比较得心应手的,然而随时技术的更新,webpack4出来了,紧随步伐,那就开始写一个webpack4的构建脚手架吧,
于是...开始了基于vue的webpack4单页构建脚手架的开发了。
Entry:入口,Webpack的入口文件,可以为String,Array,Object。
Output:出口,输出的最终结果,里面可以配置path、publicPath、filename、chunkFilenamet等。
Module:模块,在 Webpack 里一切皆模块,配置处理各种文件所需要的loader。
optimization:主要是做webpack3当中commonchunk所做的事件,可实现代码分离、提取公共模块等,配置更灵活也是最为复杂的一部分。
Plugin:包括内置插件及第三方插件,直接对整个构建过程起作用。
├── 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
entry: {
main: [
path.resolve(__dirname, '../src/main.js'),
],
}
output: {
path: path.resolve("./dist"),
filename: '[name].[hash:10].js',
chunkFilename: '[name].chunk.js'
}
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
}
}
开发模式入口文件加入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
}
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()
]
};
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]'
}
}
]
},
]
}
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
}
}),
new OptimizeCssAssetsPlugin(),
动态链接库做关联
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(vendorManifestPath)
})
optimization:{
hashedModuleIds:true,
},
以上是脚本宝典为你收集整理的webpack4 vue全家桶 SPA单页应用构建案例全部内容,希望文章能够帮你解决webpack4 vue全家桶 SPA单页应用构建案例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。