webpack基本使用

webpack主要有四个核心概念：

1、入口（entry）

2、输出（output）

3、loader

4、插件（plugins）

 

入口（entry）：

入口会只是webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口七点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。在webpack中入口有多种方式来定义。

单个入口语法：

const config={
  entry:"./src/main.js"
}

对象语法：

const config={
  app:"./src/main.js",
  vendors:"./src/vendors.js"
}

输出（output）：

output属性会告诉webpack在哪里输出它创建的bundles，以及如何命名这些文件，默认值为./dist

const config={
  entry:"./src/main.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,'dist')
  }
}

loader：

loader让webpack可以去处理那些非JavaScript文件（webpack资深只理解JavaScript）。loader可以将所有类型的文件转换为webpack能够有效处理的模块，例如，开发的时候使用ES6，通过loader将ES6的语法转为ES5，如下配置：

const config={
  entry:"./src/main.js",
  output:{
    filename:"bundle.js",
    path:path.resolve(__dirname,'dist')
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:"babel-loader",
        options:[
          presets:["env"]
        ]
      }
    ]
  }
}

插件（plugins）：

loader被用于转换某些类型的模块，而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。使用一个插件也非常容易，只需要require()，然后添加到plugins数组中

//通过npm安装
const HtmlWebpackPlugin=require('html-webpack-plugin');
//用于访问内置插件
const webpack=require('webpack');
const config={
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader:"babel-loader"
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({template:'./src/index.html'})
  ]
}

利用webpack搭建应用：

webpack.config.js

const path = require('path');
 
module.exports = {
  mode: "development", // "production" | "development"
  // 选择 development 为开发模式， production 为生产模式
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: [
          presets: ["env"]
        ]
      }
    ]
  },
  plugins: [
    ...
  ]
}

上述例子构建了一个最简单的配置，webpack 会从入口 main.js 文件进行构建，通过 loader 进行js转换，输出一个为 bundle.js 的文件，至此一整个过程就构建完成。