1. 代码地址：https://gitee.com/q_yup/webpack-demo
    2. 建立项目的webpack配置文件
    • 项目的根目录新建webpack默认的配置文件webpack.config.js,也可以使用其它文件名。但需要使用—config指定配置文件

    • 假设在项目的根目录新建webpack.config.js文件，并配置了一些基础属性(如下)，终端执行webpack，就会从当前路径下寻找webpack.config.js文件，并按照文件配置执行得到结果。如果没有找到（执行webpack）webpack.config.js就会打印webpack所有的API属性。（如果新建的webpack配置文件不是默认的，在终端执行webpack —config webpack.dev.config.js。在终端使用webpack指令需要全局安装npm i webpack -g）

      1. module.exports = {
      2. entry: "./src/script/main.js",//打包入口
      3. output: {
      4.   path: "./dist/js",//打包之后文件的存放路径
      5.   filename: "bundle.js"//打包之后的文件名
      6. }
      7. }

    • 可以在package.js中配置webpack的执行指令，直接npm run webpack

      1. "scripts": {
      2.   "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
      3. },
    1. webpack配置entry和output new

    entry打包入口，三种方式：

    • 只有一个入口文件，使用string
    • 多个入口文件，并且在目录中属于平行关系，使用数组。可以打包在一起
    • 对象，分key-value，key就是这一项的 Chunk Name，value就是一个真实的entry，value可以是字符串或者是数组。使用场景：多页面

    output属性配置：

    • filename打包之后每个文件的名字，webpack提供了chunk name [name]、本次打包的 [hash]、每次打包生成的文件的hash值，文件变动时打包之后hash值变动，文件没有变动时，hash不会做变动，因此可以理解为本次打包文件的版本号[chunkhash]
      1. module.exports = {
      2. entry: "./src/script/main.js",//打包入口
      3. output: {
      4.     path: "./dist/js",//打包之后文件的存放路径
      5.     filename: "bundle.js"//打包之后的文件名
      6. }
      7. }
      1. module.exports = {
      2. entry: ["./src/script/main.js","./src/script/a.js"],//打包入口
      3. output: {
      4.     path: "./dist/js",//打包之后文件的存放路径
      5.     filename: "bundle.js"//打包之后的文件名
      6. }
      7. }
      1. module.exports = {
      2. entry: {
      3.     main: "./src/script/main.js",
      4.     a: "./src/script/a.js"
      5. },//打包入口
      6. output: {
      7.     path: "./dist/js",//打包之后文件的存放路径
      8.     filename: "[name]-[chunkhash].js"//打包之后的文件名
      9. }
      10. }