webpack的基本使用

1.命令行

全局安装： npm i -g webpack
项目安装：npm i -D webpack //执行当前项目的构建
初始化：npm init -y
下载jquery：npm i -S jquery

//使用ES6的模块化方法，导入jquery文件
命令：import $ from 'jquery' //作用：导入jquery文件，并且交给$变量

//同时在html文件中引入生成的dist文件
<script src="../dist/main.js"></script>

//通过命令：webpack 入口文件 出口文件
//webpack就能够读取指定的入口文件，进行模块化分析打包，最终将打包好的文件输出到指定的出口文件中
命令：webpack ./src/js/main.js ./dist/main.js

2.配置文件（webpack.config.js）

//1 在项目的根目录中创建一个名为：webpack.config.js的文件
//2 这个文件需要导出一个对象，module.exports = {}
//3 配置好入口和出口文件以后，在cmd中执行命令：webpack

const path = require('path')
module.exports = {
  //entry表示webpack的入口文件，值为：文件路径
  entry: path.join(__dirname, './src/js/main.js'),

  //output设置出口文件
  output: {
    //path指定出口文件的路径
    path: path.join(__dirname, './dist'),
    //filename 表示生成出口文件的名称
    filename:'bundle.js'
  }
}