Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 07226a25 by zsh
Options

更新初始化项目包

parent 46664329
Showing with 170 additions and 212 deletions
build/build.prd.js
// 此文件是项目打包服务,用来构建一个全量压缩包 // 此文件是项目打包服务,用来构建一个全量压缩包
// 命令: npm run build // 命令: npm run build
"use strict"; 'use strict'
// node for loading const ora = require('ora')
const ora = require("ora"); const rm = require('rimraf')
// rm-rf for node const chalk = require('chalk')
const rm = require("rimraf"); const path = require('path')
// console for node const webpack = require('webpack')
const chalk = require("chalk"); const config = require('./webpack.prod.conf')
// path for node const rmFile = path.resolve(__dirname, '../dist')
const path = require("path");
// webpack
const webpack = require("webpack");
// webpack production setting
const config = require("./webpack.prod.conf");
// 指定删除的文件
const rmFile = path.resolve(__dirname, "../dist");
// build start loading // build start loading
const spinner = ora("building for production..."); const spinner = ora('building for production...')
spinner.start(); spinner.start()
// 构建全量压缩包 // 构建全量压缩包
rm(rmFile, function(err) { rm(rmFile, function (err) {
if (err) throw err; if (err) throw err
webpack(config, function(err, stats) { webpack(config, function (err, stats) {
spinner.stop(); spinner.stop()
if (err) throw err; if (err) throw err
process.stdout.write( process.stdout.write(
stats.toString({ stats.toString({
colors: true, colors: true,
modules: false, modules: false,
children: false, children: false,
chunks: false, chunks: false,
chunkModules: false chunkModules: false
}) + "\n\n" }) + '\n\n'
); )
if (stats.hasErrors()) { if (stats.hasErrors()) {
console.log(chalk.red(" Build failed with errors.\n")); console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1); process.exit(1)
} }
console.log(chalk.cyan(" Build complete.\n")); console.log(chalk.cyan(' Build complete.\n'))
console.log( console.log(
chalk.yellow( chalk.yellow(
" Tip: built files are meant to be served over an HTTP server.\n" + ' Tip: built files are meant to be served over an HTTP server.\n' +
" Opening index.html over file:// won't work.\n" " Opening index.html over file:// won't work.\n"
) )
); )
}); })
}); })
build/vue-loader.config.js
...@@ -7,7 +7,7 @@ module.exports = (isDev) => { ...@@ -7,7 +7,7 @@ module.exports = (isDev) => {
extractCSS: !isDev, // 将.vue中的css单独抽离出来 extractCSS: !isDev, // 将.vue中的css单独抽离出来
cssModules: { // 解决class命名空间冲突 cssModules: { // 解决class命名空间冲突
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]', // class命名 localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]', // class命名
camelCase: true, // 驼峰class命名 camelCase: true // 驼峰class命名
}, },
// hotReload: false // 是否关闭组件热重载, 根据环境变量生成 // hotReload: false // 是否关闭组件热重载, 根据环境变量生成
// 自定义loader模块 // 自定义loader模块
......
build/webpack.base.conf.js
// 此文件主要是webpack开发环境和生成环境的通用配置 /**
* @file webpack.base.conf 生产 & 开发环境通用配置
*/
'use strict' 'use strict'
// 引入node path路径模块
const path = require('path') const path = require('path')
const webpack = require('webpack') const webpack = require('webpack')
// 引入webpack生产环境配置参数
const prodConfig = require('../config/config').build
const createVueLoaderOptions = require('./vue-loader.config') const createVueLoaderOptions = require('./vue-loader.config')
// 拼接路径 // 拼接路径
function resolve(track) { function resolve (track) {
return path.join(__dirname, '..', track) return path.join(__dirname, '..', track)
} }
// 资源路径 // 当前运行环境
function assetsPath(_path) {
return path.join(prodConfig.staticPath, _path)
}
const isDev = process.env.NODE_ENV === 'development' const isDev = process.env.NODE_ENV === 'development'
const defaultPlugins = [ const defaultPlugins = [
...@@ -29,11 +24,8 @@ const defaultPlugins = [ ...@@ -29,11 +24,8 @@ const defaultPlugins = [
}) })
] ]
// webpack基本配置
module.exports = { module.exports = {
// 项目入口文件 -> webpack从此处开始构建
entry: path.resolve(__dirname, '../src/index.js'), entry: path.resolve(__dirname, '../src/index.js'),
// 配置模块如何被解析
resolve: { resolve: {
// 自动解析文件扩展名(补全文件后缀)(左 -> 右) // 自动解析文件扩展名(补全文件后缀)(左 -> 右)
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
...@@ -48,7 +40,7 @@ module.exports = { ...@@ -48,7 +40,7 @@ module.exports = {
} }
}, },
module: { module: {
// 处理模块的规则(可在此处使用不同的loader来处理模块！) // 处理模块的规则(可在此处使用不同的loader来处理模块)
rules: [ rules: [
{ {
test: /\.(vue|js|jsx)$/, test: /\.(vue|js|jsx)$/,
...@@ -84,17 +76,17 @@ module.exports = { ...@@ -84,17 +76,17 @@ module.exports = {
options: { options: {
limit: 1024, limit: 1024,
name: '[name]_[hash:8].[ext]', name: '[name]_[hash:8].[ext]',
outputPath: 'images/', // 静态资源输出路径 outputPath: 'images/' // 静态资源输出路径
} }
} }
] ]
}, },
{ {
// 当前loader需要处理的文件类型(后缀) // 当前loader需要处理的文件类型(后缀)
test: /\.(eot|ttf|svg)$/, // iconfont字体文件 test: /\.(eot|ttf|svg|woff|woff2)(\?\S*)?$/, // iconfont字体文件
// 处理test中的文件类型需要用到的loader类型(名称) // 处理test中的文件类型需要用到的loader类型(名称)
use: { use: {
loader: 'file-loader', // 处理静态资源类型 loader: 'file-loader' // 处理静态资源类型
} }
} }
] ]
......
build/webpack.dev.conf.js
// 该文件主要用于构建开发环境 /**
* @file webpack.dev.conf 开发环境配置
*/
'use strict' 'use strict'
// 引入node path路径模块
const path = require('path') const path = require('path')
// 引入webpack
const webpack = require('webpack') const webpack = require('webpack')
// 引入webpack开发环境配置参数 const devConfig = require('../config/config').dev // 开发环境配置
const devConfig = require('../config/config').dev
// 引入webpack基本配置
const baseConf = require('./webpack.base.conf') const baseConf = require('./webpack.base.conf')
// webpack配置合并模块,可简单的理解为与Object.assign()功能类似
const merge = require('webpack-merge') const merge = require('webpack-merge')
// 创建html入口文件的webpack插件
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
// 编译提示的webpack插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// 发送系统通知的node模块
const notifier = require('node-notifier') const notifier = require('node-notifier')
// 将webpack基本配置与开发环境配置合并！
const devConf = merge(baseConf, { const devConf = merge(baseConf, {
// 项目出口, webpack-dev-server 生成的包并没有写入硬盘, 而是放在内存中
output: { output: {
// 文件名
filename: '[name].[hash:8].js', filename: '[name].[hash:8].js',
// html引用资源路径,在dev-server中,引用的是内存中文件
publicPath: devConfig.publicPath publicPath: devConfig.publicPath
}, },
// 生成sourceMaps(方便调试)
devtool: devConfig.devtoolType, devtool: devConfig.devtoolType,
// 启动一个express服务器,使我们可以在本地进行开发
devServer: { devServer: {
// HMR控制台log等级 // HMR控制台log等级
clientLogLevel: 'warning', clientLogLevel: 'warning',
...@@ -127,7 +115,6 @@ const devConf = merge(baseConf, { ...@@ -127,7 +115,6 @@ const devConf = merge(baseConf, {
} }
] ]
}, },
//使用element-ui
{ {
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader' loader: 'file-loader'
...@@ -175,7 +162,7 @@ const devConf = merge(baseConf, { ...@@ -175,7 +162,7 @@ const devConf = merge(baseConf, {
}) })
}, },
clearConsole: true clearConsole: true
}), })
] ]
}) })
......
build/webpack.prod.conf.js
// 此文件主要用于构建生产环境的配置 /**
* @file webpack.base.conf 生产环境配置
*/
'use strict' 'use strict'
// 引入node path路径模块
const path = require('path') const path = require('path')
// 引入webpack
const webpack = require('webpack') const webpack = require('webpack')
// 一个webpack配置合并模块,可简单的理解为与Object.assign()功能类似！
const merge = require('webpack-merge') const merge = require('webpack-merge')
// 引入webpack生产环境配置参数 const prodConfig = require('../config/config').build // 生产环境配置
const prodConfig = require('../config/config').build
// 引入webpack基本配置
const baseConf = require('./webpack.base.conf') const baseConf = require('./webpack.base.conf')
// 创建html入口文件的webpack插件！
const HtmlWebpackPlugin = require('html-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin')
// 抽离出css的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 压缩css的webpack插件
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// 拷贝文件的webpack插件
// const CopyWebpackPlugin = require('copy-webpack-plugin')
// 资源路径 // 资源路径
function assetsPath(_path) { function assetsPath (_path) {
return path.join(prodConfig.staticPath, _path) return path.join(prodConfig.staticPath, _path)
} }
// 将webpack基本配置与生产环境配置合并！
const prodConf = merge(baseConf, { const prodConf = merge(baseConf, {
// 项目出口配置 output: {
output: { path: path.resolve(__dirname, '../dist'),
// build后所有文件存放的位置 publicPath: prodConfig.publicPath,
path: path.resolve(__dirname, '../dist'), filename: assetsPath('js/[name].[chunkhash:8].js'),
// html引用资源路径,可在此配置cdn引用地址！ chunkFilename: assetsPath('js/[name].[chunkhash:8].js')
publicPath: prodConfig.publicPath, },
// 文件名 devtool: prodConfig.devtoolType,
filename: assetsPath('js/[name].[chunkhash:8].js'), module: {
// 用于打包require.ensure(代码分割)方法中引入的模块 // 处理模块的规则(可在此处使用不同的loader来处理模块！)
chunkFilename: assetsPath('js/[name].[chunkhash:8].js') rules: [
}, {
// 生成sourceMaps(方便调试) test: /\.css$/,
devtool: prodConfig.devtoolType, use: ExtractTextPlugin.extract({
module: { use: ['css-loader', 'postcss-loader'],
// 处理模块的规则(可在此处使用不同的loader来处理模块！) fallback: 'vue-style-loader'
rules: [ })
{ },
test: /\.css$/, {
use: ExtractTextPlugin.extract({ test: /\.less$/,
use: ['css-loader', 'postcss-loader'], use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader' use: ['css-loader', 'less-loader', 'postcss-loader'],
}) fallback: 'vue-style-loader'
}, })
{ },
test: /\.less$/, {
use: ExtractTextPlugin.extract({ test: /\.scss$/,
use: ['css-loader', 'less-loader', 'postcss-loader'], use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader' use: ['css-loader', 'sass-loader', 'postcss-loader'],
}) fallback: 'vue-style-loader'
}, })
{ }
test: /\.scss$/, ]
use: ExtractTextPlugin.extract({ },
use: ['css-loader', 'sass-loader', 'postcss-loader'], plugins: [
fallback: 'vue-style-loader' // 每个chunk头部添加vue-cli-init!
}) new webpack.BannerPlugin('vue-cli-init'),
}
]
},
plugins: [
// 每个chunk头部添加vue-cli-init!
new webpack.BannerPlugin('vue-cli-init'),
// 压缩js // 压缩js
new webpack.optimize.UglifyJsPlugin({ new webpack.optimize.UglifyJsPlugin({
parallel: true, parallel: true,
compress: { compress: {
warnings: false warnings: false
} }
}), }),
// 分离入口引用的css,不内嵌到js bundle中! // 分离入口引用的css,不内嵌到js bundle中!
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: assetsPath('styles/[name].[contentHash:8].css'), filename: assetsPath('styles/[name].[contentHash:8].css'),
publicPath: '../../', publicPath: '../../',
allChunks: false allChunks: false
}), }),
// 压缩css // 压缩css
new OptimizeCSSPlugin(), new OptimizeCSSPlugin(),
// 根据模块相对路径生成四位数hash值作为模块id // 根据模块相对路径生成四位数hash值作为模块id
new webpack.HashedModuleIdsPlugin(), new webpack.HashedModuleIdsPlugin(),
// 作用域提升,提升代码在浏览器执行速度 // 作用域提升,提升代码在浏览器执行速度
new webpack.optimize.ModuleConcatenationPlugin(), new webpack.optimize.ModuleConcatenationPlugin(),
// 抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度 // 抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度
// 1. 第三方库chunk, 公共部分 // 1. 第三方库chunk, 公共部分
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'vendor', name: 'vendor',
minChunks: function(module) { minChunks: function (module) {
// 在node_modules的js文件 // 在node_modules的js文件
return ( return (
module.resource && module.resource &&
/\.js$/.test(module.resource) && /\.js$/.test(module.resource) &&
module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
) )
} }
}), }),
// 2. 缓存chunk // 2. 缓存chunk
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'manifest', name: 'manifest',
minChunks: Infinity minChunks: Infinity
}), }),
// 3.异步 公共chunk // 3.异步 公共chunk
new webpack.optimize.CommonsChunkPlugin({ new webpack.optimize.CommonsChunkPlugin({
name: 'app', name: 'app',
children: true, children: true,
// (选择所有被选 chunks 的子 chunks) // (选择所有被选 chunks 的子 chunks)
async: true, async: true,
// (创建一个异步 公共chunk) // (创建一个异步 公共chunk)
minChunks: 3 minChunks: 3
// (在提取之前需要至少三个子 chunk 共享这个模块) // (在提取之前需要至少三个子 chunk 共享这个模块)
}), }),
// 将整个文件复制到构建输出指定目录下 // 将整个文件复制到构建输出指定目录下
// new CopyWebpackPlugin([ // new CopyWebpackPlugin([
// { // {
// from: path.resolve(__dirname, '../static'), // from: path.resolve(__dirname, '../static'),
// to: prodConfig.staticPath, // to: prodConfig.staticPath,
// ignore: ['.*'] // ignore: ['.*']
// } // }
// ]), // ]),
// 生成html // 生成html
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../dist/index.html'), filename: path.resolve(__dirname, '../dist/index.html'),
template: 'index.html', template: 'index.html',
favicon: path.resolve(__dirname, '../favicon.ico'), favicon: path.resolve(__dirname, '../favicon.ico'),
// js资源插入位置, true表示插入到body元素底部 // js资源插入位置, true表示插入到body元素底部
inject: true, inject: true,
// 压缩配置 // 压缩配置
minify: { minify: {
// 删除Html注释 // 删除Html注释
removeComments: true, removeComments: true,
// 去除空格 // 去除空格
collapseWhitespace: true, collapseWhitespace: true,
// 去除属性引号 // 去除属性引号
removeAttributeQuotes: true removeAttributeQuotes: true
}, },
// 根据依赖引入chunk // 根据依赖引入chunk
chunksSortMode: 'dependency' chunksSortMode: 'dependency'
}) })
] ]
}) })
module.exports = prodConf module.exports = prodConf
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment