webpack基础

概念

• webpack是一个静态化前端打包器
• 可以把复杂的依赖关系打包一个或多个文件
• 最终生成浏览器可以识别的资源html，css，图片，js

webpack.config.js

• 配置webpack

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
   mode:"development"
}

运行

• npx webpack
• package.json

  "scripts":{
    "serve":"webpack"
  }

 插件

• 处理文件，比如压缩，清理等
• html-webpack-plugin

把public里面的index.html
拷贝的dist目录，并插入打包好的.js

•  const {CleanWebpackPlugin} from 'clean-webpack-plugin'
  清理dist目录

 loader 处理器

• 处理文件(转换文件默认只支持json与js
• css-loader处理css  tyle-loader把css加载到style标签
• file-loader处理文件地址  url-loader处理文件地址  把小图片转为base64 省一次网络请求

 命名

• [hash:7]哈希值

哈希命令有效控制缓存与更新
hash
contenHash 和内容有关
chunkHash 和入口有关

•  [name]当前文件名
•  [ext]后缀名

本地服务器  webpack-dev-server

• proxy代理
• hot热更新
• host域名
• port端口号
• open自动打开浏览器

• package.json
  scripts:{"serve":"webpack serve"}

按需下载 

import("jquery").then(({default:$})=>{

})

webpack魔法注释 

/*webpackChunName:"jquery",webpackPrefetch:true */
加载的文件名，预加载(有网络空闲提前加载)

  devtool 开发工具

• 当前码出错如何报错  eval

别名

resolve:{
 alias:{
   "@":path.resolve(__dirname,"src")
  }
}

把css抽出单独文件

 

mini-css-extract-plugin

单vue文件的加载，以及babel的使用 

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api


npm install --save-dev @babel
npm install --save-dev @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev babel/core

npm i vue -S
npm i vue-loader  vue-style-loader vue-template-compiler vue-hot-reload-api -D

因为我们安装的 babel 是 6.x 版本，而它所对应的 babel-loaderl 版本必须是 7.x，所以在命令行中，我们明确指定了版本号。如果版本不对应，就会抛出 Cannot find module '@babel/core' 错误。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',//使用绝对路径
    },
    module: {
        rules: [{ //vue 解析
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: { //开发环境使用style-loader打包
                    css: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
                    scss: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader, 'sass-loader']
                }
            }
        }, { //js 解析
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }, {
            test: /\.css$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                     name: 'images/[name]-[hash].[ext]',//所有图片放进images目录
}
            }]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'myWebpack',
            filename: 'index.html',
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name]-[hash].css",//所有抽离出的样式文件，放进css目录
            chunkFilename: "vue-[name]-[hash].css"
        }),
        new VueLoaderPlugin()
    ],
};

优化参考

// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入css抽出压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
// 导入path
const path = require('path');
// 导入拷贝插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 导入清空插件
const {
	CleanWebpackPlugin
} = require('clean-webpack-plugin');
// 导入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
		// 入口
		entry: {
			vue: './src/main.js',
			base: './src/index.js'
		},
		// 出口
		output: {
			// 文件名
			filename: "main[contenthash:7].js",
			// 文件夹__dirname 当前目录
			path: __dirname + '/dist'
		},
		plugins: [
			// 实例化vue插件
			new VueLoaderPlugin(),
			// 清空
			new CleanWebpackPlugin(),
			new HtmlWebpackPlugin({
				// 指定模板文件
				filename: 'index.html',
				template: './public/index.html',
				chunks: ['vue'], //指定vue入口打包进来
			}),
			new HtmlWebpackPlugin({
					filename: 'base.html',
					template: './public/base.html',
					chunks:['base'], //指定base入口打包
				}),
				new MiniCssExtractPlugin({
					filename: "style-[contenthash:7].css"
				}),
				new CopyWebpackPlugin( // 设置静态目录（拷贝文件到另外一个文件夹）
					{
						patterns: [
							// { from: __dirname+'/public', to: __dirname+'/dist' },
							//from 从， to 到 __dirname 当前目录
							{
								from: __dirname + '/src/static',
								to: __dirname + '/dist/static'
							},
						],

					}
				),
			],
			module: {
				rules: [{ //vue 解析
						test: /\.vue$/,
						loader: 'vue-loader',
						options: {
							loaders: { //开发环境使用style-loader打包
								css: ['style-loader', 'css-loader'],
								less: ['style-loader', 'css-loader', 'less-loader']
							}
						}
					},
					// loader 是有顺序的，从右到左
					{
						test: /\.css$/,
						use: [ /*'style-loader'*/ MiniCssExtractPlugin.loader, "css-loader"]
					},
					{
						test: /\.less$/,
						use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
					},
					{
						test: /\.(jpg|jpeg|png|gif|webp|ico)$/,
						use: [{
							loader: 'url-loader',
							options: {
								limit: 10000,
								name: 'images/[name].[ext]'
							}
						}]
					}

				]
			},
			optimization: {
				// realContentHash: true
				minimizer: [
					new CssMinimizerPlugin(),
					new TerserWebpackPlugin(),
				]
			},
			resolve: {
				alias: {
					'@': path.resolve(__dirname, './src'), //设置@为src目录的别名
				}
			},
			// devtool:"source-map",
			mode: process.env.NODE_ENV, //产品模式| development
			devServer: {
				open: true, //打开浏览器
				host: "localhost", //本地域名
				port: 8080, //端口号
				hot: true //热更新
			}
		}