# webpack基本概念

# 安装(webpack4)

全局安装

npm i webpack webpack-cli -g
//一些简写说明
-d == --save-dev
-s == save
-g == global

局部安装


npm i webpack webpack-cli -D
// 检查是否安装成功
webpack -v
webpack-cli -v

TIP

推荐使用局部安装,防止在一台电脑上要同时运行两个不同版本的webpack项目

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后不再作为 webpack 的依赖了，我们使用时需要单独安装这个工具

初始化package.json文件

package.json 文件是对项目或者模块包的描述可以通过 npm init 得到这个文件

# webpack 的基本概念

webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。

# 入口

入口可以使用 entry 字段来进行配置，webpack 支持配置多个入口来进行构建：

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

// 上述配置等同于
module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 或者配置多个入口
module.exports = {
  entry: {
    foo: './src/page-foo.js',
    bar: './src/page-bar.js', 
    // ...
  }
}

// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  }
}

# 输出

输出即指 webpack 最终构建出来的静态文件，当然，构建结果的文件名、路径等都是可以配置的，使用 output 字段

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

// 或者多个入口生成不同文件
module.exports = {
  entry: {
    foo: './src/foo.js',
    bar: './src/bar.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
}

// 路径中使用 hash，每次构建时会有一个不同 hash 值，避免发布新版本时线上使用浏览器缓存
module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: __dirname + '/dist/[hash]',
  },
}

# loader

webpack只能出来js文件,项目中其他的文件,都需要相应的loader来处理,如:用style-loader,css-loader处理css

module: {
  // ...
  rules: [
    {
      test: /\.css$/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
      include: [
        path.resolve(__dirname, 'css') // 指定哪些路径下的文件需要经过 loader 处理
      ],
       use: [                             //需要使用的loader
            'style-loader',
            'css-loader'
        ]
    },
  ],
}

# plugin

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。通过添加我们需要的 plugin，可以满足更多构建中特殊的需求。例如，要使用压缩 JS 代码的 uglifyjs-webpack-plugin 插件，只需在配置中通过 plugins 字段添加新的 plugin 即可

const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyPlugin()
  ],
}

常用loader及plugin →