express 多模块
多模块入口文件为多个。
搭建多模块有几点要注意。
1.本地调试的热更新插件在入口文件中必须加入。
server.js入口文件添加热更新插件
提取入口文件的key为一个数组，然后遍历，每个入口文件都添加热更新插件中间件 webpack-hot-middleware\
Object.keys(baseWebpackConfig.entry).forEach(function(name) {
baseWebpackConfig.entry[name] = [path.join(__dirname, 'dev-client')].concat(baseWebpackConfig.entry[name])
})
dev-client.js文件如下\
require('eventsource-polyfill')\
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
\
hotClient.subscribe(function(event) {
if (event.action === 'reload') {
window.location.reload()
}
})
2.output.filename
filename: '[name]/[name].js', //导出文件的文件名参数中[name] 指的是 entry对象中的键。
如: entry: {detail: './src/main.js'} [name] 就是detail.\
3.output.chunkFilename
chunkFilename: '[name]/[id].[chunkhash].js' // chunkFile 路径\
在webpack3在引入模块时是可以定义chunkName的。使用特殊的注释法 \
const HelloWorld = () => import (/* webpackChunkName: "index/webworker" */, '../app.vue') 。如果不是webpack3 那么 [name]是chunkfile的编号。从0开始计数和[id]一样。[id]对应的chunkfile编号。
4.多模块html文件要引入对应的文件，多个入口文件应该有多个 对应HtmlWebpackPlugin实例。
new HtmlWebpackPlugin({
filename: name + '/' + name + '.html', //生成的html的文件名
template: htmls[name], //引入的html模板
inject: true, //注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中
minify: { //压缩配置
removeComments: true, //删除html中的注释代码
collapseWhitespace: true, //删除html中的空白符
removeAttributeQuotes: true //删除html元素中属性的引号
},
// 模板文件引入的名字
chunks: [name, 'common'], // 这里定义了对应的模块引入对应模块名字的文件和common 公共文件。
chunksSortMode: 'dependency' //按dependency的顺序引入
}
5.静态资源的处理
这里的处理方式，是不管是绝对路径还是相对路径引入的静态文件，都给重新定义一下路径为publicPath的路径（跟路径），
输出的时候根据对应的资源在建一个文件夹 ,这里是将图片静态资源都输出到根路径下的images文件，所有经过url-loader处理过的图片资源的url都会被重新定义为/images/ 文件夹下面。其他资源的处理方法都是一样的。
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 1024, // 门限 小于1k的资源会被转成base64格式数据
name: '[name].[ext]', // 输出文件的名字
outputPath: publickPath + '/images/', // 输出路径 将静态资源打包到静态资源文件夹
publicPath: '/' // 处理静态资源路径问题，重新定义路径为根目录
}
},
6.中间件的热重载
vue官方事例中这个地方是注释掉的，如果打开这个方法的话。当页面改变的时候vue-style-loader的热重载就会失效，而是直接刷新页面。
//声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后
compiler.plugin('compilation', function(compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
调试发现无法实现热重载是因为下面这个方法的原因，注释掉同样能够保留vue-style-loader的热重载。\
hotMiddleware.publish({ action: 'reload' }) // 关闭可实现vue文件热重载.
cb()
})
})
7.对于loader提取css和不提取css的写法
webpack对于loader的使用顺序是从右向左的顺序，
例：['style-loader', 'css-loader'] 如果匹配到了对应的文件，那么会优先使用css-loader 处理，最后再使用style-loader处理样式，如果顺序不对的话可能会报错。
提取css\
{\
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: [{
loader: 'css-loader',
options: { minimize: true, sourceMap: true } // minimize 是否压缩 sourceMap: 是否生成source-map文件
}]
})
},
{\
test: /.less$/,
use: ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use: [{
loader: 'css-loader',
options: { minimize: true, sourceMap: true } // minimize 是否压缩 sourceMap: 是否生成source-map文件
},
{ loader: 'less-loader', options: { sourceMap: true } }
]
})
},
不提取css
{
test: /.css$/,
use: ['vue-style-loader',
{
loader: 'css-loader',
options: { minimize: false, sourceMap: false }
}
]
},
{
test: /.less$/,
use: ['vue-style-loader',
{
loader: 'css-loader',
options: { minimize: false, sourceMap: false }
},
{ loader: 'less-loader', options: { sourceMap: false } }
],
},
8.vue-loader配置
webpack 1版本中的vue-loader配置是在 webpackconfig配置下有一个vue属性中配置的，配置方法跟webpack 2版本以上的vue-loader的options配置写法一样。
{
test: /.vue$/,
loader: 'vue-loader',
"options": {
"loaders": {
"postcss": [
"vue-style-loader",
{
"loader": "css-loader",
"options": { "minimize": false, "sourceMap": false}
}
],
"css": [
"vue-style-loader",
{
"loader": "css-loader",
"options": {"minimize": false,"sourceMap": false }
}
],
"less": [
"vue-style-loader",
{
"loader": "css-loader",
"options": {"minimize": false,"sourceMap": false}
},
{
"loader": "less-loader",
"options": {"sourceMap": false}
}
],
"scss": [
"vue-style-loader",
{
"loader": "css-loader",
"options": {"minimize": false,"sourceMap": false}
}
]
},
// 如果以下标签的src或者href有变化，会更新页面。
"transformToRequire": {
"video": "src",
"source": "src",
"img": "src",
"image": "xlink:href"
}
}
提取css写法
{
test: /.vue$/,
loader: 'vue-loader',
"options": {
"loaders": {
"postcss": ExtractTextPlugin.extract({
fallback: 'vue-style-loader',
use:[
{ "loader": "css-loader","options": { "minimize": false, "sourceMap": false} }
]
}),
}\
}\
}
