4

1、webpack是流行的资源打包工具,属于前端workflow(工作流)的一部分。

简单说,它牛逼的地方就是把一切静态资源打包在一个文件,并且有一堆的插件。

2、安装webpack

把webpack安装到项目依赖
npm install webpack --save-dev 安装到项目。

3、webpack要工作,依赖于一个webpack.config.js的配置文件。

module.exports={        //node.js的模块输出标准格式
    entry: './main.js',     //entry是入口文件,是程序的入口文件的相对地址
    output: {               //打包后输出的文件
        filename: 'bundle.js'       //输出的文件叫做bundle.js
    }
};

4、命令行执行webpack

调用全局安装的webpack工具对资源进行打包,最后输出或创建bundle.js文件

5、index.html script src = bundle.js

网页最后调用的是打包后的文件

6、入口文件的数量有多个

//node.js的模块输出标准格式
module.exports = {
    //entry是入口文件,是程序的入口文件的相对地址
    entry: {
        bundle1: './main1.js',
        bundle2: './main2.js'
    },
    //打包后输出的文件
    output: {
        filename: '[name].js'
    }
    //输出的文件叫做bundle.js
};

flyer_dev
413 声望45 粉丝

Front-End Developer