正文

webpack的总结

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

pasting

2, 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({//配置全局环境为生产环境
,
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
})
)
}

相关阅读

目录[+]