WebPack打包工具

 webpack官网

• webpack本身是node的一个第三方模块包，用来打包代码。
• javascript应用程序的静态模块打包工具。
• webpack作用：①打包整合项目文件，缩小项目体积，提高加载速度。②也能够实现语法降级，webpack打包之后es6/7/8会降到es5。③支持vue单页面程序。

下载webpack打包工具

npm        i        webpack        -d

需要打包的js文件

a.js文件

console.log('这是a.js文件中的代码+aaaaaaaaaaa');

b.js文件

console.log('这是b.js文件中的代码+bbbbbbbbbbbbb');

入口文件

main.js文件

// 引入a和b文件
import './a';
import './b';

在项目的根目录下创建webpack.config.js配置文件

webpack打包工具默认打包的对象是js文件，配置信息如下所示

let path = require("path");
// 配置内容
module.exports = {
    // 入口文件
    entry:"./src/main.js",
    // 输出文件【名称、地址】
    output:{
        // 地址
        path:path.join(__dirname,"src"),
        // 名称
        filename:"demo.min.js"
    }
}

如果想要打包css文件，则先下载可以打包css的第三方模块

npm  i css-loader

npm  i  style-loader

配置信息如下所示

let path =require("path");
module.exports = {
    // 入口文件
    entry: {
        js : './new/mainJS.js',
        css: './new/mainCSS.js'
    },
    output: {
        // 输出文件地址名称
        path: path.join(__dirname,"./new"),
        filename: "[name].min.js"
                    // [name] 根据入口文件的名字自动创建文件
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}

运行webpack

doc窗口直接输入 webpack