webpack笔记

1、npm install -g webpack 全局安装
2、npm init 然后 npm install --save-dev webpack 进行项目目录的安装
3、建立项目结构分为 src和dist两个文件 src 是源码文件 dist是编译打包好的文件
4、第一次打包 webpack src/entery.js dist/bundle.js 如果发生了报错 webpack src/entery.js --output dist/bundle.js --mode development
5、然后 npm install -g live-server 运行 live-server
6、配置文件：webpack.config.js, 入口和出口文件

module.export = {
    // 入口文件的配置项
      entry: {},
    // 出口文件的配置项
      output: {},
    // 模块：解读css、图片如何转换和压缩
      module: {}
    // 插件用户生产模版和各种功能
      plugins: {},
    // 配置webpack服务功能
      devServer: {}}

entry： 配置入口文件的地址，可以配置单个入口也可以配置多个入口

output: 配置出口文件的地址，也可以配置多个出口

module: 配置模块，主要是解析css和图片转换压缩等功能

plugins： 配置插件，根据所需要的功能配置不同的插件

devServer：配置开发服务功能

entry选项

webpack.config.js文件中的entry选项

entry: {
    entry: './src/entry.js'
}

output选项中我们用到了path，所以我们需要在webpack.config.js 的头部引入path  const path = require('path');   path.resolve(__dirname,'dist')的意思就是获取项目的绝对路径

output: {
    // 打包的路径文件
    path: path.resolve(__dirname, 'dist'),
    // 打包的文件名称
    filename: 'bundle.js'
}