webpack的基本使用

webpack的基本使用

一、webpack的功能

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

二、使用webpack的流程

（1）初始化项目，生成package.json文件；

npm init

（2）安装webpack需要的包（webpack-cli和webpack）；

npm install --save-dev webpack-cli webpack

（3）在package.json中添加执行编译的命令，创建配置文件（webpack.config.js），并配置；

注：此处的“webpack”是“webpack.config.js”配置文件的简写，上下两句含义相同。
（4）打包测试

npm run webpack

三、webpack的核心概念

（1）entry指定入口文件；
（2）output指定输出相关信息；
（3）loader可以帮助webpack处理那些非js文件；
（4）plugins（插件）用于执行范围更广的任务。

（1）entry和output：

单入口：

entry：{
  main：'./src/index.js'
}

const path = require('path');
output:{
  path:path.resolve(__dirname,'dist'),
  filename:'任意.js'
}

多入口：

entry:{
  index:'./src/index.js',
  search:'./src/search.js'
}

output:{
  path:path.resolve(__dirname,'dist'),
  filename:'[name].js'
}

(2)loader

到官网查找loader相关的文档：webpack官网loader部分
例：

module.exports = {
  module:{
    rules:[
        {
          test:/.\js$/,
          exclude:/node_modules/,
          loader:'babel-loader'
        }
    ]
  }
}

（3）plugins

学会到官网或其他地方查找相应的plugins文档：
例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins:[
  new HtmlWebpackPlugin({
  template:'./index.html'
    })
  ]
}