原生js项目中webpack.config.js的简单配置

原生js项目中webpack.config.js的简单配置

const { resolve } = require("path");
const autoprefixer = require("autoprefixer");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const uglifyjs = require("uglifyjs-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");

/* 
postcss-loader/autoprefixer:添加css兼容性前缀
babel-core/bable-loader/babel-preser-latest:es6-es5
css-loader/style-loader：处理css样式
ejs/ejs-loader:处理模板文件
mini-css-extract-plugin:提取样式文件
file-loader/url-loader:处理文件
html-loader/html-webpack-plugin:处理HTML文件
node-sass/sass-loader:编译sass语法
uglifyjs-webpack-plugin:压缩混淆js代码
*/

/* 需要注意的是:在webpack中[字符串]都是相应的变量并且它的变量名都是固定的 */

module.exports = {
	// 模式： 生产 | 开发
	mode: "development", //production
	// 入口文件：多文件入口
	entry: {
		index: resolve(__dirname, "./src/js/index.js"),
		detail: resolve(__dirname, "./src/js/detail.js"),
		collections: resolve(__dirname, "./src/js/collections.js"),
	},
	// 输出、打包设置
	output: {
		//  路径(绝对路径的一个拼接)
		path: resolve(__dirname + "./dist"),
		// 打包后的文件名
		filename: "js/[name].js",
	},
	// 模块设置
	module: {
		// 模块匹配规则
		rules: [
			{
				test: /\.js$/,
				loader: "babel-loader",
				exclude: resolve(__dirname, "node_modules"),
				query: {
					presets: ["latest"],
				},
			},
			{
				test: /\.tpl$/,
				loader: "ejs-loader",
			},
			{
				test: /\.scss$/,
				use: [
					{
						loader: miniCssExtractPlugin.loader,
						options: {
							hmr: process.env.NODE_ENV === "development",
						},
					},
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							plugins: function () {
								// 自动添加前缀（这些都是固定写法）
								return [autoprefixer("last 5 version")];
							},
						},
					},
					"sass-loader",
				],
			},
			{
				test: /\.(png|jpg|jpeg|gif|ico|woff|eot|svg|ttf)$/i,
				loader: [
					"url-loader?limit=1024&name=img/[name]-[hash:16].[ext]",
					// 压缩图片使用
					"image-webpack-loader",
				],
			},
		],
	},
	// 插件配置
	plugins: [
		// new uglifyjs(),
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: resolve(__dirname, "src/index.html"),
			title: "新闻头条",
			chunks: ["index"],
			chunksSortMode: "manual",
			excludeChunks: ["node_modules"],
			hash: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
			},
		}),
		new HtmlWebpackPlugin({
			filename: "detail.html",
			template: resolve(__dirname, "src/detail.html"),
			title: "新闻详情",
			chunks: ["detail"],
			chunksSortMode: "manual",
			excludeChunks: ["node_modules"],
			hash: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
			},
		}),
		new HtmlWebpackPlugin({
			filename: "collections.html",
			template: resolve(__dirname, "src/collections.html"),
			title: "我的新闻",
			chunks: ["collections"],
			chunksSortMode: "manual",
			excludeChunks: ["node_modules"],
			hash: true,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
			},
		}),
		new miniCssExtractPlugin({
			filename: "css/[name].css",
		}),
	],

	// 开发服务器的配置
	devServer: {
		watchOptions: {
			ignored: /node_modules/,
		},
		open: true,
		host: "localhost",
		port: 3000,
	},
};