webpack的作用以及配置webpack

webpack是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
在项目中我们可能会用到.less文件和es6文件，我们需要将这些文件转换成html能直接使用的文件，比如less转css , es6转es5 。 我们可以先转换文件，再引用到html中，但这样做非常的繁琐，类似的文件数量一多，将会变成非常麻烦的事情。这时，我们可以使用webpack打包工具，将这些文件一次性打包并使用，简化打包的过程。
要想使用webpack，我们首先要安装webpack-cli。
全局安装 npm install -g webpack webpack-cli
局部安装 npm install --save-dev webpack webpack-cli

配置webpack

在项目文件夹中我们创建了一个webpack.config.js文件来编写webpack的配置文件

	// 配置webpack，使用nodejs和commonjs模块化
// 引入NodeJS内置模块path
// const path = require('path');
const {
  resolve
} = require('path');
// 引入插件  自动在打包出口目录内生成html文件，并且自动引入打包后的代码
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 在源代码与打包代码之间产生映射关系
  devtool: "source-map",
  // devtool: "inline-source-map",
  // devtool: "hidden-source-map",
  // devtool: "eval-source-map",
  // 设置入口文件路径
  // entry: './src/index.js',
  // 设置多入口
  entry: {
    index1: './src/index.js',
    indexa: './src/js/a.js'
  },
  // 出口
  output: {
    // 打包后的文件存放的目录的绝对路径
    path: resolve(__dirname, 'dist'),
    // 打包后的文件名
    // filename: 'index-dev.js'
    // 多出口
    // [name]是入口对象的属性名
    filename: 'js/[name]-dev.js'
  },
  // 加载器
  module: {
    rules: [
      // 处理html中的img图片的
      {
        test: /\.html/,
        use: 'html-loader'
      },
      // 处理图片文件  css中用到了图片引入
      {
        test: /\.png|jpg|gif$/i,
        use: [{
          loader: 'file-loader',
          options: {
            // 设置打包后的文件出口路径
            outputPath: 'images'
          }
        }]
      },
      /* {
        test: /index\.css$/i,
        use: [{
          loader: 'file-loader',
          options: {
            emitFile: false,
          }
        }],
      }, */
      /* {
        test: /index\.css$/i,
        // 排除某些文件
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader']
      }, */
      {
        test: /\.css$/i,
        // 顺序是在数组中从右往左执行
        // style-loader 在head里创建style标签设置样式
        // css-loader将css文件代码转为字符串加载到js中
        // use: ['style-loader', 'css-loader']
        // use: 'file-loader'
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: 'styles'
          }
        }]
      },
      {
        test: /\.less$/,
        // less-loader将less文件转换为css文件
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  // 插件
  plugins: [
    // 生成一个空白html
    // new HTMLWebpackPlugin()
    new HTMLWebpackPlugin({
      // 以指定的html模板生成html
      template: './src/main.html'
    })
  ],
  // 打包模式设置
  mode: 'development',
  // mode:'production'
  // 配置webpack开发服务器  工具：webpack-dev-server
  devServer: {
    // 构建后的目录，一般是打包后的文件存储的目录
    contentBase: resolve(__dirname, 'build'),
    // 是否gzip压缩
    compress: true,
    // 端口号  默认8080
    port: 3000,
    // 是否自动打开浏览器
    open: true
  },
};

webpack有五个模块 ：
入口(entry) -----设置入口文件路径
输出(output) -----设置打包后的文件存放路径以及文件名
loader加载器(module) -----一般用于css文件的打包
插件(plugin) -----可以设置一个html模板插件
模式(mode) -----设置打包模式（一般在开发阶段使用webpack,一般不在产品阶段打包）
另外还有
source-map -----文件映射，文件出错时提示源文件位置
webpack-dev-server -----webpack开发服务器

使用webpack打包

在编写好项目代码以及webpack配置文件后，我们可以在终端直接输入webpack命令即可运行打包