Webpack核心配置作用

webpack的作用

webpack是一个静态资源打包工具
它会以一个或多个文件作为打包的入口,将整个项目所有的文件编译组合成一个或多个文件输出.
输出的文件就是编译好的静态文件,文件可以在浏览器段运行了.

webpack大核心配置

1.entry(入口)

指示Wepack从哪个文件开始打包

module.exports = {
  entry: './main.js',
};

2.output(输出)

指示Webpack打包完成后的文件输出到哪了去,如何命名等

const path = require('path');
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
};

3.loader(加载器)

webpack本身只能处理js,json等资源,其他资源需要借助loader,webpack才能解析.

const path = require('path');
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
   module: {
    rules: [{ test: /\.css$/, use: 'css-loader' }],
  },
};

4.plugins(插件)

扩展webpack的功能,例如将打包文件压缩,将空格,没有使用到的代码,

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
   module: {
    rules: [{ test: /\.css$/, use: 'css-loader' }],
  },
    plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

5.mode(模式)

主要由两种模式
开发模式:development
生产模式:production

module.exports = {
  mode: 'production',
};