1，首先 项目的入口----package的入口
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
1、首先build;---映射到build.js
webpack(
webpackConfig,function(){})pasting2, webpack的webpack.build.conf.js 的配置
webpackConfig=merge(baseWebpackConfig,{})
var webpackConfig = merge(baseWebpackConfig, {
entry: entry,
module: {
rules: utils.styleLoaders({
sourceMap: config[buildEnv].productionSourceMap,
extract: true
})
},
devtool: config[buildEnv].productionSourceMap ? '#source-map' : false,
output: {
path: config[buildEnv].assetsRoot, //导出文件的绝对路径
filename: utils.assetsPath(config[buildEnv]['filename']),//当初文件的文件名
chunkFilename: utils.assetsPath(config[buildEnv]['chunkFilename'])//编译输出的文件
},
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({//配置全局环境为生产环境
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({ //JS文件的压缩
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
},
sourceMap: config[buildEnv].productionSourceMap
}),
// extract css into its own file
new ExtractTextPlugin({ // 分离css的插件
filename: utils.assetsPath(config[buildEnv]['styleFilename'])
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({ // css多处重复引用，一个过滤
cssProcessorOptions: {
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
// new HtmlWebpackPlugin({
// filename: config[buildEnv].index,
// template: 'index.html',
// inject: true,
// minify: {
// removeComments: true,
// collapseWhitespace: false,
// removeAttributeQuotes: false
// // more options:
// // https://github.com/kangax/html-minifier#options-quick-reference
// },
// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
// chunksSortMode: 'dependency'
// }),
// split vendor js into its own file
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks: function (module, count) {
// // any required modules inside node_modules are extracted to vendor
// return (
// module.resource &&
// /.js$/.test(module.resource) &&
// module.resource.indexOf(
// path.join(__dirname, '../node_modules')
// ) === 0
// )
// }
// }),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// chunks: ['vendor']
// }),
// copy custom static assets
]
})
多入口的模板的配置
new HtmlWebpackPlugin({
filename: page.filename,
template: page.template,
chunks: [].concat(page.chunks).concat(htmlBundleConcat),
inject: page.inject,
minify: typeof (config[buildEnv].htmlMinify) === 'object' ? Object.assign({}, config[buildEnv].htmlMinify) : {},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
})
//分离公共js到vendor中
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
复制static下的内容到指定的文件中
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config[buildEnv].assetsSubDirectory,
ignore: ['.*']
}
])
配置开启Gzip 的压缩，对生成的文件进行压缩，生成.gp的文件
if (config[buildEnv].productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\.(' +
config[buildEnv].productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
baseWebpackConfig 文件的配置
{
entry: mutiEntry, //js以数据方式写入，代表多页面入口文件配置
output: { //js页面出口文件的文件配置
path: config[buildEnv]['assetsRoot'],
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
? config[buildEnv]['assetsPublicPath']
: config.dev.assetsPublicPath
},
resolve: { //js的其他色解决的方案
extensions: ['.js', '.vue', '.json'],
modules: ['node_modules', path.resolve(__dirname, '../src/style/sprite')],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
exportsEslintRule,
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: config.commonConfig.img2base64Limit,
name: utils.assetsPath(config[buildEnv]['imgname'])
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: config.commonConfig.font2base64Limit,
name: utils.assetsPath(config[buildEnv]['fontname'])
}
}
]
}
//js module的loder的配置例如：vue-loder,beble-loader编译器解决方案--编译，url-loader图片的loader
二，对于webpack_dev执行的顺序
1，webpack是由express 搭建的服务
查看一下express 的配置
// 中间middleware是
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
//中间middleware实现的是自动刷新的功能var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
//1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件
//2.当文件改变时,会自动编译。
//3.当在编译过程中请求某个资源时，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕
pasting
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
dev.conf.js 做的事情
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({//定义webpack全局的变量
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),//热更新插件
new webpack.NoEmitOnErrorsPlugin(),//不触发错误，即运行之后的包正常的运行
// https://github.com/ampedandwired/html-webpack-plugin
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
new FriendlyErrorsPlugin() // 友好的提示错误
]
})
for(var key in config.pages){
var page = config.pages[key]
webpackConfig.plugins.push(
new HtmlWebpackPlugin({//编译之后文件的入口
filename: page.filename,
template: page.template,
chunks: page.chunks,
inject: page.inject
})
)
}