webpack配置

https://www.webpackjs.com/concepts/(中文官网)

给一个入口js文件，webpack会顺着此文件，找到所有依赖，然后把这些依赖打包成浏览器可识别的文件。

webpack默认只能打包js文件，loader就是帮助webpack打包那些webpack默认打包不了的模块的工具

1.模块化

解决了全局污染，互相覆盖，早期使用两种模块化规范：AMD规范：require.js，CMD规范：sea.js

，后来ES6 module完美解决模块化问题(export，import)。

COMMONJS规范：【node的模块化】

// 导出
module.exports = xxx
// 导入
var 变量 = require（‘xxx’）

2.集成

npm i webpack -g 或 yarn global add webpack
webpack -v
创建package.json   //npm init 或者yarn init 
npm i webpack ｜｜yarn add webpack
根目录创建webpack.config.js

3.例

/**
 * 整个项目webpack打包的配置文件
 */

const path = require('path'); // 引入node内置模块，用于拼接路径
const webpack = require('webpack'); // 引入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 打包html的插件

module.exports = {
// 1）配置入口 (vue react都是单入口)
    entry: ["./src/index.js", './src/a.js'],
    // entry: { //多入口，多出口可以使用对象的形式
    //     index: "./src/index.js", // 给js取别名
    //     a: "./src/a.js",
    // },

// 2）出口
    output: {
        path: path.resolve(__dirname, 'dist'),//配置出口路径为当前目录下的dist 
        filename: 'bundle.js' // 输出的文件名
    },
// 3）开启观察者模式
    watch: true,  

// 4）加载器模块的配置
    module: {
        // 配置处理的规则
        rules: [ //rules--规则
            //test 值为正则表达式，匹配要处理的文件，use值为使用的加载器，可以有多个，用数组形式
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test:  /\.(jpg|png|gif)$/, use: 'file-loader' }
        ]
    },

// 5）webpack-dev-server的配置 启服务器
    devServer: { 
        open: true,
        // port: 8088  // 不写默认就是8080
    },
//6）插件配置
    plugins:[ 
        //注释添加到生成的文件的头部
        new webpack.BannerPlugin('我是注释'),
        new HtmlWebpackPlugin({template: './index.html'})
    ]
}