一,output中filename:'[name].bundle.js'中的name属性取决于entry中定义的入口变量,例:
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js', // 这里会打包生成app.bundle.js和print.bundle.js两个js文件
path: path.resolve(__dirname, 'dist')
}
二,plugins中的HtmlWebpackPlugin的基本用法:重新生成index.html文件,将打包生成的js文件自动添加到index.html中,这样就避免在webpack.config.js改变了entry入口文件的变量名时,index.html文件中的引入却没有改变。
三,clean-webpack-plugin的作用:每次打包的时候清除之前的dist文件夹中的文件,所以dist中文件都是新生成的必须的文件
四,devtool: 'inline-source-map'的作用:能够准确的找到错误发生的原文件及地点,这在打包开发环境的时候很有用
五,webpack-dev-server的作用:创建了一个简单的web服务器,并且能够实时重新加载
六,懒加载:懒加载指的是动态加载js文件,在第一次需要用到这个js之前不加载,需要的时候再加载,加载js用到了动态导入,
在webpack的配置文件中的output输出中定义chunkFilename: '[name].bundle.js'。取值的方式:import(/* webpackChunkName: "print" */ './print').then(module => { var print = module.default; print(); });
七,防止缓存:在webpack的配置文件中的output中定义filename: '[name].[chunkhash].js',chunkhash会生成唯一的hash值,且打包后的html引用也会指向这里。
八,提取公共依赖文件到一个新的打包文件中,这样就能做到防止代码重复加载:在plugins中定义new webpack.optimize.CommonsChunkPlugin({name: 'common' // 指定公共 bundle 的名称。})
九,提取第三方库到单独的文件中,这样可以减少客户端向服务端请求的次数:在入口entry中定义一个文件名,将所有的第三方库放在这个数组对象里,vendor:【‘lodash’】,然后在plugins中定义new webpack.optimize.CommonsChunkPlugin({name: 'vendor' // 指定公共 bundle 的名称。}),此时就已将lodash放在了vendor的文件中
十,main,vendor,manifest,这三个打包生成的文件中main文件代表所有的业务逻辑,vendor文件代表第三方库,manifest代表提取出来的公共的依赖文件;在打包的时候main会随着自身的改变而hash值改变,vendor会随着自身的moudle.id的改变而改变,manifest会随着业务代码中发生新引入文件而改变。一般来说依赖库打包生成的vendor是不会改变的,所以vendor的hash值也不应改变,new webpack.HashedModuleIdsPlugin()能让vendor的hash值维持不变。
十一,定义全局变量:不需要在业务代码中引入js文件,可以利用在webpack.config.js中的plugins的webpack.ProvidePlugin定义全局变量,例new webpack.ProvidePlugin({ _: 'lodash' }),就是在项目全局中定义了一个 _变量,这个变量是来自lodash
十二,webpack.config.js想要获取到env变量,就必须将module.exports转换为一个函数,给与env赋值的时候,可以在package.json里面通过命令赋值webpack --env.NODE_ENV=local --env.production --progress
十三,多页面应用配置:
const path = require('path');
const fs = require('fs');
// 处理公共entry
const commonEntry = ['./src/vendor.js', './src/polyfill.js'];
// 页面目录
const PAGES_DIR = './src/pages/';
const entry = {};
// 遍历页面目录
const getPages = () => {
return fs.readdirSync(PAGES_DIR).filter(item => {
let filepath = path.join(PAGES_DIR, item, 'index.js');
if (!fs.existsSync(filepath)) {
filepath = `${filepath}x`; // jsx
}
if (!fs.existsSync(filepath)) {
return false;
}
return true;
});
};
getPages(options).forEach(file => {
const name = path.basename(file);
// 加入页面需要的公共入口
entry[name] = [...commonEntry, `${PAGES_DIR}/${file}/index`];
});
// 导出配置
module.exports = {
entry,
};
十四:简单的webpack-dev-js配置:
const path = require('path')
const htmlPlugin=require('html-webpack-plugin');
module.exports = {
entry: './src/study.js',
devServer: {
inline:true
},
plugins:[
new htmlPlugin({
filename:'index.html',
template:"./study.html"
})
],
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
}
十五:增加对新目录的支持:
// 扩展 webpack 配置,使 packages 加入编译
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
chainWebpack: config => {
config.module
.rule('js')
.include
.add(resolv('packages')) // 此处一定要加上绝对路径导入
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
十六:配置.eslintrc.js文件,使其匹配代码编辑器:在rules中加入:'vue/script-indent': ['warn', 4, {'baseIndent': 1}],在module.exports中加入overrides:[ { 'files':['*.vue'], 'rules':{ 'indent':'off' } } ]
十七:resolve项常见配置
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'], // 引入文件时可以自动忽略文件的后缀名
alias: {
'@': resolve('src') // 给路径加上别称
}
}
十八:在控制台获得mock请求的方法:利用webpack的代理模式来配置代理请求
devServer: {
port: port,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://127.0.0.1:${port}/mock`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
after: require('./mock/mock-server.js')
},