webpack.json文件：

"dependencise" 开发阶级上线布置的包 -S
"devDependencise" 开发阶级的包 -D

webpack.config.js文件：

一、安装webpack

npm install webpack webpack-cli -D

二、安装webpack-dev-server

npm install webpack-dev-server -D

webpack-dev-server：类似于node阶段用到的nodemon工具，每当修改了源代码webpack会自动进行项目的打包和构建

三、安装html-webpack-plugin

npm install html-webpack-plugin -D

html-webpack-plugin：(1）通过html插件复制到项目根目录中index.html页面，也被放到了内存中（2）HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

四、配置devserver

devserver:首次打包成功后自动打开浏览器

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    devserver ：{
       open :true, // 首次打包成功后是否自动打开浏览器
       prot: 80, // 在http协议中（如果端口号是80则可以省略）
       host: "1027:0.0.1" // 指定运行的地址
    }
}

五、安装处理CSS文件的loader

npm install style-loader@3.0.0 css-loader@5.2.6 -D

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    module:{
        rules :[
            //定义了不同模块对应的loader
            {test:\.css/,use:['style-loader','css-loader']}
        ]
    }
}

六、配置build

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    output: {// 指定生产文件存放目录
        path:'',// 存放目录
        filename :'main.js', // 存放目录名称
    }
}

七、配置和使用plugin 插件自动删除dist目录

npm install --save-dev clean-webpack-plugin

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    plugin :[
        new HtmlwebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        })
    ]
}

八、开发模式下配置sourceMap

sourceMap :就是一个信息文件里面储存的位置信息。也就是说soureMap文件中存储着压缩混淆后的代码，所对应的转换前的位置，出错的时候除错工具将显示原始代码，而不是转换后的代码，能够极大的方便后期调试。

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    devtool： 'eval-source-map' // 在开发调试阶段建议设置为eval-source-map
    // devtool: 'nosource-source-map' //在实际开发时建议设置值或关闭sourceMap
    // devtool: ’source-map'不建议使用，安全性差。即暴露源码，也暴露具体行位'
}
// 发布项目建议关闭sourceMap（不配置默认是关闭状态），为了安全性。防止控制台报错后别人可以精准的定位到源代码

九、webpack中@的原理

@表示src源码目录。从外往里查找，不使用../ 从里往外查找

    mode :'dev', // 指定环境 
    entry: path.join(__dirname,'./src/main.js'), // 指定要处理的文件，打包入口文件路径
    resolve: {
        alias: {
            '@': path.josn(..dirname,'-/src/') // @符号表示src这一层目录
        }
    }
}

webpack配置

webpack.json文件：

webpack.config.js文件：