Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 07226a25 by zsh
Options

更新初始化项目包

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