dongzeliang
/
vue-admin-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

webpack4.0
Pan 2018-08-14 18:00:50 +08:00
parent 7134bfa7ac
commit f46e99300b
6 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
build/utils.js
View File

@ -5,9 +5,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
config.build.assetsSubDirectory :
config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
@ -37,8 +37,7 @@ exports.cssLoaders = function (options) {
// (which is the case during production build)
if (options.extract) {
loaders.push(MiniCssExtractPlugin.loader)
}
else {
} else {
loaders.push('vue-style-loader')
}
@ -59,13 +58,14 @@ exports.cssLoaders = function (options) {
return loaders
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
sass: generateLoaders('sass', {
indentedSyntax: true
}),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')

19
build/vue-loader.conf.js
View File

@ -1,22 +1,5 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
module.exports = {
loaders: utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}),
cssSourceMap: sourceMapEnabled,
cacheBusting: config.dev.cacheBusting,
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
//You can set the vue-loader configuration by yourself.
}

4
build/webpack.base.conf.js
View File

@ -2,6 +2,7 @@
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
@ -85,6 +86,9 @@ module.exports = {
}
]
},
plugins: [
new VueLoaderPlugin(),
],
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).

84
build/webpack.prod.conf.js
View File

@ -9,7 +9,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
function resolve(dir) {
@ -18,6 +18,10 @@ function resolve(dir) {
const env = require('../config/prod.env')
// For NamedChunksPlugin
const seen = new Set();
const nameLength = 4;
const webpackConfig = merge(baseWebpackConfig, {
mode: 'production',
module: {
@ -30,42 +34,19 @@ const webpackConfig = merge(baseWebpackConfig, {
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') //need test
filename: utils.assetsPath('js/[name].[chunkhash:8].js'),
chunkFilename: utils.assetsPath('js/[name].[chunkhash:8].js')
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash:8].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash:8].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
// new OptimizeCSSPlugin({
// cssProcessorOptions: config.build.productionSourceMap ?
// {
// safe: true,
// map: {
// inline: false
// }
// } :
// {
// safe: true
// }
// }),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
@ -82,13 +63,31 @@ const webpackConfig = merge(baseWebpackConfig, {
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks
chunksSortMode: 'none'
// default sort mode uses toposort which cannot handle cyclic deps
// in certain cases, and in webpack 4, chunk order in HTML doesn't
// matter anyway
}),
new ScriptExtHtmlWebpackPlugin({
//`runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}),
// keep chunk.id stable when chunk has no name
new webpack.NamedChunksPlugin(chunk => {
if (chunk.name) {
return chunk.name;
}
const modules = Array.from(chunk.modulesIterable);
if (modules.length > 1) {
const hash = require("hash-sum");
const joinedHash = hash(modules.map(m => m.id).join("_"));
let len = nameLength;
while (seen.has(joinedHash.substr(0, len))) len++;
seen.add(joinedHash.substr(0, len));
return `chunk-${joinedHash.substr(0, len)}`;
} else {
return modules[0].id;
}
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// copy custom static assets
@ -98,19 +97,38 @@ const webpackConfig = merge(baseWebpackConfig, {
ignore: ['.*']
}])
],
// recordsPath: path.join(__dirname, 'records.json'),
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 只打包初始时依赖的第三方
},
elementUI: {
name: 'chunk-elementUI', // 单独将 elementUI 拆包
priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
test: /[\\/]node_modules[\\/]element-ui[\\/]/
}
}
},
runtimeChunk: 'single',
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
cache: true,
parallel: true
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSAssetsPlugin()
],
}
})
@ -146,10 +164,10 @@ if (config.build.generateAnalyzerReport || config.build.bundleAnalyzerReport) {
if (config.build.generateAnalyzerReport) {
webpackConfig.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'bundle-report.html',
openAnalyzer: false
}))
}
}
module.exports = webpackConfig

7
config/index.js
View File

@ -35,11 +35,6 @@ module.exports = {
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
@ -71,7 +66,7 @@ module.exports = {
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#ource-map',
devtool: 'ource-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.

30
package.json
View File

@ -14,11 +14,11 @@
},
"dependencies": {
"axios": "0.18.0",
"element-ui": "2.4.4",
"element-ui": "2.4.6",
"js-cookie": "2.2.0",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"vue": "2.5.10",
"vue": "2.5.17",
"vue-router": "3.0.1",
"vuex": "3.0.1"
},
@ -35,7 +35,7 @@
"babel-preset-stage-2": "6.24.1",
"chalk": "2.4.1",
"copy-webpack-plugin": "4.5.2",
"css-loader": "0.28.7",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
@ -43,14 +43,14 @@
"eventsource-polyfill": "0.9.6",
"file-loader": "1.1.11",
"friendly-errors-webpack-plugin": "1.7.0",
"html-webpack-plugin": "3.2.0",
"html-webpack-plugin": "^4.0.0-alpha",
"mini-css-extract-plugin": "0.4.1",
"node-notifier": "5.2.1",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"ora": "2.1.0",
"portfinder": "1.0.13",
"postcss-import": "11.0.0",
"ora": "3.0.0",
"portfinder": "1.0.16",
"postcss-import": "12.0.0",
"postcss-loader": "2.1.6",
"postcss-url": "7.3.2",
"rimraf": "2.6.2",
@ -61,17 +61,17 @@
"svg-sprite-loader": "3.8.0",
"uglifyjs-webpack-plugin": "1.2.7",
"url-loader": "1.0.1",
"vue-loader": "14.2.2",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "2.5.10",
"webpack": "4.16.1",
"vue-loader": "15.3.0",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.5.17",
"webpack": "4.16.5",
"webpack-bundle-analyzer": "2.13.1",
"webpack-cli": "3.0.8",
"webpack-dev-server": "3.1.4",
"webpack-merge": "4.1.3"
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",
"webpack-merge": "4.1.4"
},
"engines": {
"node": ">= 4.0.0",
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [