图片来自webpack官网logo
目录
loader的一些方法：
css-loader- 处理css文件 style-loader-把css插入到header
less-loader-处理.less MiniCssExtractPlugin.loader-压缩抽出css-loader
file-loader-处理文件，图片 url-loader-当文件比较小转成base64（减少一http请求）
image-webpack-图片压缩
插件：
html-webpack-plugin
html模板插件
命令script：
“script”:{
"build":"webpack"，
“serve”:"webpack serve"
}
webpack 如何优化项目
css优化压缩 css-minimizer-webpack-plugin
图片优化 image-webapck压缩图片 file-loader base64格式
js优化压缩
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),
]},devtool与sourceMap:
devtool: "source-map", // enum
devtool: "inline-source-map", // 嵌入到源文件中
devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
devtool: "hidden-source-map", // SourceMap 不在源文件中引用
devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
devtool: "eval", // 没有模块映射，而是命名模块。以牺牲细节达到最快。
// 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
// 牺牲了构建速度的 `source-map' 是最详细的。
异步加载 import(xxx).then()
预加载 import(/* webpackPrefetch: true */ 'jquery')
hash命名 hash
chunkhash 如果入口发生变化就会发生变化
contenthash 如果内容发生变化名称发生变化
摇树 tree shaking
按需导入js 借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
代码分包 splitChunks
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}, 别名
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), //设置@为src目录的别名
}
},静态目录
new CopyWebpackPlugin( // 设置静态目录（拷贝文件到另外一个文件夹）
{patterns:[
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 从， to 到 __dirname 当前目录
{ from: __dirname+'/src/static', to: __dirname+'/dist/static' },
],
}),webpack搭建一个vue脚手架cli
安装依赖：vue源文件 vue npm i Vue -S
vue npm i Vue -S2.处理.vue文件 vue-loader
vue-loader3.处理vue样式 vue-style-loader
vue-style-loader
4.编译template模板文件 vue-template-compiler
vue-template-compiler5.热更新vue-hot-reload-api
vue-hot-reload-api
webpack // 导入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 实例化vue插件
new VueLoaderPlugin(),配置
loader
{ //vue 解析
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: { //开发环境使用style-loader打包
css: ['style-loader', 'css-loader'],
less: ['style-loader', 'css-loader', 'less-loader']
}
}
},多入口打包
入口：
entry: {
vue: './src/main.js',
base: './src/index.js'
},new HtmlWebpackPlugin({
// 指定模板文件
filename: 'index.html',
template: './public/index.html',
chunks: ['vue'], //指定vue入口打包进来
}),
new HtmlWebpackPlugin({
filename: 'base.html',
template: './public/base.html',
chunks:['base'], //指定base入口打包
}),跨平台传递参
cross-env:
package.json
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",获取
process.env.NODE_ENV
作用：根据不同的参数可以切换不同的配置项切换环境
webpack 如何指定配置文件
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
webpack-merge 配置抽离方法
webpack-merge可以帮助我们引入公共配置进入dev和prod
//安装
npm install webpack-merge -DWebpack-merge 提供了一个函数，该函数将数组串联并合并创建新对象的对象。如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值包装在函数中
语法：
// 默认的方式
const output = merge (object1, object2, object3, ...);
// 数组对象
// 这适用于所有可用的功能。
const output = merge ([object1, object2, object3]);
// 右边优先
const output = merge (
{ fruit: "apple", color: "red" },
{ fruit: "strawberries" }
);
学习累了就来风尚云网：风尚云网风尚云网提供了编程的基础技术游戏, HTML、CSS、Javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣
http://www.fengshangyunwang.cn/
附：webpack优化图
