你可能不知道的webpack小知识

一、概念

  是一个静态模块打包工具。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图,主要包括下面四个核心概念
1.入口entry：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
2.出口output：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
3.loader：让webpack处理非JavaScript类型的文件，webpack中的loader主要用两个目标：
① test：应该被loader转化的文件
②use：转换文件时使用什么样的loader
4.插件：主要是解决loader无法解决的其他事情

二、使用步骤

1.初始化项目
2.安装两个webpack安装包
3.安装相关的loader
4.书写webpack.config.js配置文件
5.执行webpack命令
注意事项
1-1 webpack本身只能处理JavaSc类型的文件，对于非js类型的文件需要借助相关的loader处理打包
1-2 处理非js类型的文件步骤
① 书写相关的css、less文件
② 在src文件夹下的main函数importcss、less文件
③ 在html页面引入打包后的build.js文件即可。
下面附上使用步骤的代码：

1.初始化项目
npm init -y / npm init

2.安装webpack：
npm install webpack -g
npm install webpack-cli -g
注意事项：建议全局安装，因为后期会大量用到

3.安装相关loader
① 解析js的loader：
npm install babel-loader babel-core --save-dev

插件：
npm install babel-preset-es2015 babel-plugin-transform-runtime --save-dev
相关解析:
1.babel：语法转化器（只转化关键字）
2.babel-core：核心包
3.babel-loader：babel与webpack结合就使用babel-loader
4.babel-preset-es2015：提供预设（转化为ES5）
5.babel-plugin-transform-runtime：转化ES6函数


② 解析css的loader：
npm install css-loader style-loader autoprefixer-loader --save-dev

相关解析：
1.css-loader：核心包
2.style-loader：生成script标签并插入
3.autoprefixer-loader：添加前缀（解决兼容性问题）


③解析less的loader：
npm install less less-loader --save-dev

webpack.config.js的配置文件如下：

const path=require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
    // 打包main.js，打包后的文件输出到dist目录中，起名为build.js
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist/'),
        filename: 'build.js'
    },
    // 配置不同类型文件模块的加载
    module: {
        rules: [
            // 配置css文件模块，让css-loader那css文件打包到js中，再用style-loader让样式生效
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'    
                ]
            },
            // 配置less文件模块
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            
            // 配置解析es6为es5
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            // 配置要解析的语法规范
                            presets: ['es2015'],
                            // babel-loader的依赖，不引入部分es6代码可能会解析错误
                            plugins: ['transform-runtime']
                        }
                    }
                ],
                // 排除掉这里的js模块，不然webpack解析他们，提高打包速度
                exclude: /node_modules/
            }
        ],
        plugins: [
            new HtmlWebpackPlugin({template: './src/index.html'})
          ]
    }
};