这是我参与「第四届青训营」笔记创作活动的第六天

1.使用webpack

在上一集已经学习了webpack的基础知识点，接下来讲解一些新的内容。

1.1 安装webpack

npm i -D webpack webpack-cli

1.2 编辑配置文件

//导入path模块
const path=require("path");
//定义js打包的规则
module.exports={
    //1.入口函数从哪里开始编译打包
    entry:"./src/main.js",
    //2.编译成功以后把内容输出到哪里去
    output:{
        // 2.1 定义输出的指定的目录__dirname当前项目根目录，产生一个dist文件夹
        path:path.resolve(__dirname,"./dist"),
        //2.2 合并的js文件存储在dist/bundle.js文件中
        filename:"bundle.js"
    },
}

1.3 执行编译命令

`npm webpack`

2.打包CSS

由于webpack只能处理js，若要处理其他文件，需要loader进行转换

2.1 安装loader

npm add -D css-loader style-loader

2.2 添加'module'处理css文件

module:{
        rules:[{
            test:/\.css$/,//把项目中所有的.css结尾的文件进行打包
            use:["style-loader","css-loader"]


        }]
    },

3.babel

3.1 安装依赖

npm i -D @babel/core @babel/preset-env babel-loader

3.2 声明产物出口

//导入path模块
const path=require("path");
//定义js打包的规则
module.exports={
    //1.入口函数从哪里开始编译打包
    entry:"./src/main.js",
    //2.编译成功以后把内容输出到哪里去
    output:{
        filename:"bundle.js",
        path:path.join(__dirname,"/dist")
    },
    module:{
        rules:[{
            test:/\.js?$/,
            use:[{
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/preset-env'
                    ]
                }
            }],

        }],
    },
}

3.3 执行'`npm webpack`'

4. 生成HTML

4.1 安装依赖

npm i -D html-webpack-plugin

4.2 声明产物出口

//导入path模块
const path=require("path");
//定义js打包的规则
module.exports={
    //1.入口函数从哪里开始编译打包
    entry:"./src/main.js",
    //2.编译成功以后把内容输出到哪里去
    output:{
        // 2.1 定义输出的指定的目录__dirname当前项目根目录，产生一个dist文件夹
        path:path.resolve(__dirname,"./dist"),
        //2.2 合并的js文件存储在dist/bundle.js文件中
        filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
   };

4.3 执行'`npm webpack`'

5.认识loader