Vue前端学习笔记

常见问题整理

1. 前端为何要进行打包和构建？

从2个方面来回答：写代码和产出代码

• 体积更小(Tree-Shaking、压缩、合并)，加载更快
• 编译高级语言和语法(TS、ES6+,模块化，scss)，减少在开发过程中的犯错，提高开发效率
• 兼容性和错误检查（Polyfill、postcss、eslint），
• 统一、高效的开发环境
• 统一的构建流程和产出标准
• 集成公司构建规范（提测、上线等）

2. 常见的loader和plugin有哪些？

loader如下：
babel-loader、css-loader、postcss-loader、style-loader、url-loader
plugin如下：
HtmlWebpackPlugin、CleanWebpackPlugin、DefinePlugin、MiniCssExtractPlugin、IgnorePlugin、HappyPack、ParallelUglifyPlugin

相关loader和plugin配置文件如下：

loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader?optional=runtime&cacheDirectory"
    },
    // 直接引入图片 url
    {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: 'file-loader'
    },
	// {
	//     test: /\.css$/,
	//     // loader 的执行顺序是：从后往前
	//     loader: ['style-loader', 'css-loader']
	// },
	{
		test: /\.css$/,
		// loader 的执行顺序是：从后往前
		loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
	},
	{
		test: /\.less$/,
		// 增加 'less-loader' ，注意顺序
		loader: ['style-loader', 'css-loader', 'less-loader']
	}, {
    test: /\.(png|jpg|jpeg|gif)$/,
		use: {
			loader: 'url-loader',
			options: {
				// 小于 5kb 的图片用 base64 格式产出
				// 否则，依然延用 file-loader 的形式，产出 url 格式
				limit: 5 * 1024,

				// 打包到 img 目录下
				outputPath: '/img1/',

				// 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
				// publicPath: 'http://cdn.abc.com'
					}
			}
	},
]
plugins: [
    // new HtmlWebpackPlugin({
    //     template: path.join(srcPath, 'index.html'),
    //     filename: 'index.html'
    // })

    // 多入口 - 生成 index.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'index.html'),
        filename: 'index.html',
        // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
        chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
    }),
    // 多入口 - 生成 other.html
    new HtmlWebpackPlugin({
        template: path.join(srcPath, 'other.html'),
        filename: 'other.html',
        chunks: ['other', 'vendor', 'common']  // 考虑代码分割
    }),
	new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
	// 通常使用该插件来判别代码运行的环境变量。
	new webpack.DefinePlugin({
		// window.ENV = 'production'
		ENV: JSON.stringify('production')
	}),

	// 抽离 css 文件
	new MiniCssExtractPlugin({
		filename: 'css/main.[contentHash:8].css'
	}),

	// 忽略 moment 下的 /locale 目录
	new webpack.IgnorePlugin(/\.\/locale/, /moment/),

	// happyPack 开启多进程打包
	new HappyPack({
		// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
		id: 'babel',
		// 如何处理 .js 文件，用法和 Loader 配置中一样
		loaders: ['babel-loader?cacheDirectory']
	}),

	// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
	new ParallelUglifyPlugin({
		// 传递给 UglifyJS 的参数
		// （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
		uglifyJS: {
			output: {
				beautify: false, // 最紧凑的输出
				comments: false, // 删除所有的注释
			},
			compress: {
				// 删除所有的 `console` 语句，可以兼容ie浏览器
				drop_console: true,
				// 内嵌定义了但是只用到一次的变量
				collapse_vars: true,
				// 提取出出现多次但是没有定义成变量去引用的静态值
				reduce_vars: true,
			}
		}
	})
]