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
})
)
}