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