webpack

依赖

npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev

命令

指定打包环境

webpack --mode <development> | <production>

开启服务器

webpack-dev-server

指定配置文件

webpack --config <配置文件路径>

webpack.config.js

const path = require("path");

module.exports = {

    // 入口（可配置多个）
    entry: {
		main: "./src/main.js"
	},

    // 出口
    output: {
        path: path.resolve(""),
        filename: "[name].[hash].js"
    },

    // 模式： development | production
    mode: "",

    // 模块
    module: {
    	// 匹配规则
        rules: []
    },

    // 插件
    plugins: [],

    // 开发环境服务器
    devServer: {
        port: 
        // 跳过检查
        disableHostCheck: true
    },

	performance: {
		// webpack的性能提示
		hints: <true | false>
	}

};

---

loader

css-loader

npm install css-loader --save-dev
npm install style-loader --save-dev
npm install mini-css-extract-plugin --save-dev

const miniCssExtractPlugin = require("mini-css-extract-plugin");

{
	test: /\.css$/,
	use: [{
		loader: miniCssExtractPlugin.loader,
		options: {
			publicPath: "../"
		}
	}, "css-loader"]
}

new miniCssExtractPlugin({
	filename: "css/[name].css"
})

vue-loader

npm install vue-loader --save-dev
npm install vue-template-compiler --save-dev

{
	test: /\.vue$/,
	use: ["vue-loader"]
}

必须要使用插件

const vueLoaderPlugin = require("vue-loader/lib/plugin");
new vueLoaderPlugin()

url-loader

npm install url-loader --save-dev

{
	test: /\.(ttf|eot|svg|woff|woff2)$/,
	use: ["url-loader"]
}

babel-loader

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties --save-dev

{
	test: /\.(js)$/,
	use: "babel-loader",
	exclude: /node_modules/
}

.babelrc

{
  "presets": ["@babel/env"],
  "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}

---

插件

html-webpack-plugin：生成html插件

npm install html-webpack-plugin --save-dev

const htmlWebpackPlugin = require("html-webpack-plugin");

new htmlWebpackPlugin({
	// 生成html文件名
	filename: "",
	// 模板
	template: "",
	// 指定引入js
	chunks: []
})

copy-webpack-plugin：复制资源插件

npm install copy-webpack-plugin --save-dev

const copyWebpackPlugin = require("copy-webpack-plugin");

new copyWebpackPlugin({
	patterns: [
		{
			from: "./src/...",
			to: "..."
		}
	]
})