webpack使用

1. 新建一个项目

 

 2. 使用npm init命令初始化这个目录

 

3. 使用 npm install webpack -save-dev  进行安装webpack

4. 新建src和dist两个文件夹

使用编辑器打开这个目录

然后再src中新建两个文件夹和在根目录新建一个index.html文件

新建index.html

 

 

在script文件下创建main.js文件

 

添加webpack.config.js文件

 

 执行webpack --mode development命令进行打包

 

entry 入口路径, 有三种写法

第一种单个打包

直接给出一个字符串路径,这种只能进行打包单个文件   缺点: 扩展或缩放配置的灵活性不大

module.exports = {
    entry: './src/script/main.js'
}

module.exports = {
    entry: {
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    }
}

这种写法的时候  如果output给的filename是固定的,同一个,那么后一个会把前一个覆盖,它们被打包生成的单个文件,如果打包生成的文件名重复了,  只会把前一个覆盖

第二种多个入口打包成一个文件entry: array   有多个文件被同时打包到一个文件中

module.exports = {
    entry: ['./src/script/main.js', './src/script/a.js'],
    output: {
        path: __dirname+'/dist/js',
        filename: 'bundle.js'
    }
}