webpack

webpack

webpack
	核心理念：一切文件都是资源，是资源都可以模块化打包加载
	特点：模块化开发，打包加载
	推荐使用commonjs规范，目前也推荐ES Module规范
	官网：http://webpackjs.org/
	
	webpack -w可以边编辑边发布
	webpack-dev-server可以开启一个服务器
	webpack 4

输入webpack指令的时候，可以通过--config参数，指定配置文件
	webpack --config 文件

安装

需要进行两次安装：
	第一次全局安装（全局安装是为了提供指令）
		npm install webpack -g
		npm install webpack-cli -g
		npm install webpack-dev-server -g
	第二次本地安装（本地安装是为了在项目开发中使用）：
		npm install webpack
安装完成，输入webpack -v查看版本号
webpack配置文件是webpack.config.js,要像定义接口对象一样定义配置
	配置文件是在node中运行，需要使用commonjs规范，其它的文件可以使用别的规范

入口文件

重要概念：
	入口：所有文件开始打包的地方（引入）
	出口：所有文件打包之后的地方（发布）
	加载机：由于webpack只能识别js文件，除了这个类型之外的文件都不能识别，必须要借助加载机
	插件：webpack本身不具备的功能，我们可以为webpack扩展
我们通过entry配置项定义入口文件（webpack最先引入最先处理的文件）
	属性值：
		字符串，表示一个文件地址
		对象，配置多个入口文件
			key表示文件名称（发布的文件的名称）		value表示文件真实地址

发布文件

webpack自身没有实现资源定位，所以我们要配置发布的文件（html中引入的文件），通过output配置
	属性值是对象
		filename定义发布后的文件名称
			如果有一个入口文件，filename直接写发布的文件
			如果有多个入口文件，用[name]表示文件的名称
		path定义文件发布的地址
			未定义path，默认向dist目录下发布
			定义了path，将向path目录下发布
	运行webpack即可，4.0中默认发布到dist目录下

process.cwd()和__dirname

process.cwd和__dirname都是node里面的指令，
process.cwd()表示执行指令的位置
__dirname表示文件所在的位置

压缩js

通过webpack.config.js文件设置mode模式来压缩js代码
	production：		作为产品发布，代码压缩
	development:	作为开发项目，代码不压缩

服务器

webpack没有内置服务器，我们需要安装webpack-dev-server模块
跟webpack一样，提供了webpack-dev-server指令，所以需要安装两次：全局安装、局部安装

CSS加载机

webpack中一切资源都要模块化加载，css文件也是资源，所以也需要模块化加载
webpack仅仅内置了对js资源的模块化加载，并没有实现对css资源的模块化加载，所以我们要安装css资源加载机
	在webpack与模块相关的配置，定义在module配置中
	加载机是加载模块的，所以定义在module配置中，通过rules属性配置加载机
		属性值是数组，每一个成员代表一个加载机对象
			test表示资源特征（是正则）		loader引入加载机的
				css资源需要两个加载机：style-loader,css-loader
				当引入多个加载机的时候，我们用!级联。使用加载机要本地安装，想传入配置，可以使用use属性引入


npm install css-loader style-loader

注意：前端模块化开发，一定要使用相对路径，引入模块

图片加载机

在webpack看来图片文件也是资源，也可以模块化加载，我们要安装图片加载机，实现图片模块化加载url-loader(依赖file-loader)。图片加载有两种方式
	同步加载：将图片写入js文件中，通过html5提供的图片的base64编码技术实现的
	异步加载：存储图片的地址，在使用图片的时候，在异步加载图片
图片到底采用哪种方式，我们可以通过传递limit参数定义，值表示图片大小，单位是字节(b)
	加载机通过query形式传递参数。例如url-loader?limit=4096
				4kb   4*1024=4096
		当图片大小小于4kb的时候，同步加载。当图片大小大于4kb的时候，异步加载

• 处于开发模式时的webpack配置

// 引入path
let path = require('path');
// 引入插件
let { VueLoaderPlugin } = require('vue-loader');
// html
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 拆分css
let MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 根目录
const root = process.cwd();

// 配置
module.exports = {
    // 模式
    mode: 'development',
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        path: path.join(root, '../server'),
        // 将静态资源发布到static/admin目录下
        filename: 'static/admin/[name].js',
        // 静态资源相对位置
        publicPath: '/'
    },
    // 解决问题
    resolve: {
        // 别名
        alias: {
            'vue$': 'vue/dist/vue.js',
            '@': path.join(root, 'src'),
            '@v': path.join(root, 'src/views'),
            '@c': path.join(root, 'src/components'),
            '@t': path.join(root, 'src/tools')
        },
        // 拓展名
        extensions: ['.vue', '.js']
    },
    // 模块
    module: {
        // 加载机
        rules: [
            // vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // css
            {
                test: /\.css$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // less
            {
                test: /\.less$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            // scss
            {
                test: /\.scss$/,
                use: [
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            // 字体图标
            {
                test: /\.(ttf|woff)$/,
                loader: 'url-loader'
            }
        ]
    },
    // 插件
    plugins: [
        // vue
        new VueLoaderPlugin(),
        // html
        new HtmlWebpackPlugin({
            // 模板
            template: './public/index.html',
            // 发布
            filename: 'views/admin.html',
            // 指纹
            hash: true
        }),
        // 拆分css
        new MiniCssExtractPlugin({
            filename: 'static/admin/style.css',
            // chunkFilename: '[id].css'
        })
    ],
    // 优化
    optimization: {
        // 拆分库文件
        splitChunks: {
            // 分组
            cacheGroups: {
                // 发布文件
                lib: {
                    name: 'lib',
                    chunks: 'initial',
                    // 规则
                    test: /node_modules/
                }
            }
        }
    }
}

• 处于生产模式

// 引入开发模式下的webpack配置
let config = require('./webpack.dev');
// 压缩css
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// 压缩js
config.mode = 'production';
// 压缩css
config.plugins.push(new OptimizeCssAssetsPlugin());

// 暴露接口
module.exports = config;