小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

第一步：在安装webpack前，需要本地环境支持node.js

安装node.js (nodejs.org/en/ 8.11.1版本 )安装完成之后，就自动生成npm(包管理器)
node -v (测试node的版本号) ， npm -v(测试npm的版本号) -----这么做的目的是为了测试node环境有没有搭建完成
安装cnpm（类似于npm）
- 优势：它的服务器是在中国，运行速度会比较快
- 地址：npm.taobao.org/
- 在终端执行： sudo npm install -g cnpm–registry=registry.npm.taobao.org

第二步：安装webpack的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
在4.0+版本中，除了安装webpack，还需安装webpack-cli才能运npm i webpack-cli -g进行全局安装

第三步：创建文件项目

建文件目录：mywebpack
在mywebpack 里面创建两个子文件夹src dist
- src文件夹中放自己的项目内容，分别创建css、js、images文件夹
  - 在src中同时创建一个index.html和main.js
  - main.js主要用于引入js文件，这样index.html中只需加载一个main.js就够了，不会造成Ajax请求
- dist文件夹存放打包好的要发布的文件（产品级内容）
  - 通过webpack工具，把main.js处理后生成的bundle.js文件放在这里

开始项目

问题1：若main.js文件中引用了ES6的高级语法，会报错

原因：因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

解决：运行webpack 入口文件路径 -o 输出文件路径对main.js进行处理：

        //注意，对于4.0+版本，语法已经改变，要记得加上-o
  	webpack .\src\main.js -o .\dist\bundle.js

问题2：每次编译完成都要重新输入上面语句，过于麻烦

解决：在项目根目录下，新建一个webpack.config.js文件进行相关配置，配置如下

  const path = require('path');

  module.exports = {
      //入口，表示要使用webpack打包哪个文件
      entry:'./src/main.js',
      //出口，输出文件相关的配置
      output:{
          path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中
          filename:'bundle.js'//指定 输出的文件名称
      }
  };

配置好文件后，只需在终端输入webpack即可打包

webpack打包好的budle.js文件并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以，在项目根目录中根本找不到这个打包好的bundle.js

所以，在index.html中引入的bundle.js应该修改为如下

 <script src="/bundle.js"></script>

问题3：每次都要重新输入上面语句，虽然已简化但任然过于麻烦

想要每次保存即自动打包编译
解决：安装webpack-dev-server工具来实现
安装步骤：
- 运行npm i webpack-dev-server -D
- 用法和webpack的用法完全一样

问题4：运行webpack-dev-server报错！！！

原因：webpack-dev-server是在项目中本地安装的，而不是全局的，不能在终端上直接执行
解决：配置package.json文件，配置如下（推荐）

{
      "name": "mywebpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
        //--open  是为了保存后直接打开浏览器
            //--port 3000 修改浏览器的默认端口号，默认为localhost:8080
            //--contentBase src 是浏览器默认打开文件为src文件，其实就是打开src文件下的index.html，而不是根目录
            //--hot 热重载，不会每次都重新生成新的bundle.js文件，而是局部更新，减少不必要的更新，同时可以实现浏览器的无刷新重载
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.4.1",
        "webpack-dev-server": "^3.8.0"
      },
      "devDependencies": {
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6"
      }
}

第二种配置方式：
- 首先在package.json文件下进行如下配置
```
  "dev": "webpack-dev-server"
```
- 其次在webpack.config.js中在原来的基础上添加以下配置：

        const webpack = require('webpack');
        module.exports = {
                devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂
                        open:true,
                port:3000,
                contentBase:'src',
                hot:true//启用热更新 第一步
                },
                plugins:[//配置插件的节点
                new webpack.HotModuleReplacementPlugin()//new 一个热更新的对象  第三步
                ]
        }

第四步：使用html-webpack-plugin插件配置启动页面

安装

在终端中安装npm i html-webpack-plugin -D
在webpack.config.js中导入在内存中生成HTML页面的插件，注意：只要是插件，一定要放到plugins节点中去

const htmlWebpackPlugin = require('html-webpack-plugin')

plugins:[//配置插件的节点
	new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象  第三步
	new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
        template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
        filename:'index.html'//指定生成页面的名称
    })
]

此时，生成的页面源码如下，在最底下自动增加了一个内存中的bundle.js的引用，则不再需要手动添加bundle.js的引用路径了，可注释掉

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/bundle.js"></script>
</head>
<body>
<ul>
    <li>这是第1个li标签</li>
    <li>这是第2个li标签</li>
    <li>这是第3个li标签</li>
    <li>这是第4个li标签</li>
    <li>这是第5个li标签</li>
    <li>这是第6个li标签</li>
</ul>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

作用

自动在内存中根据指定页面生成一个内存页面
自动将打包好的bundle.js追加到页面中去

第五步：配置处理第三方loader

注意：

webpack默认只能打包处理 JS 类型的文件，无法处理其他的非 JS 类型的文件
如果要处理非JS类型的文件，需要手动安装一些适合第三方loader加载器

打包处理css文件：

安装npm i style-loader css-loader -D
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
       ]
    }

同时在main.js中导入css文件

	import  './css/index.css'

打包处理less文件

安装npm i less-loader -D
安装npm i less -D
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']}s//配置处理.less文件的第三方loader规则
       ]
    }

打包处理scss文件

安装npm i sass-loader -D
安装cnpm i node-sass -D(用npm很大情况会装不下来，推荐cnpm)
在webpack.config.js中新增一个配置节点module

	module:{//这个节点，用于配置所有第三方模块加载器
       rules:[//所有第三方模块的匹配规则
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则
       ]
    }

总结

index.html如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 将所有js文件导入放到main.js中 -->
    <!-- <script src="main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- <script src="/bundle.js"></script> -->
</head>
<body>
    <ul>
        <li>这是第1个li标签</li>
        <li>这是第2个li标签</li>
        <li>这是第3个li标签</li>
        <li>这是第4个li标签</li>
        <li>这是第5个li标签</li>
        <li>这是第6个li标签</li>
    </ul>
</body>
</html>

main.js如下：


import $ from 'jquery'
//使用import语法，导入css样式表
import './css/index.css'
// 导入less样式
import './css/index.less'
// 导入scss样式
import './css/index.scss'

$(function(){
    $('li:odd').css('backgroundColor','blue');
    $('li:even').css('backgroundColor','pink');
})

webpack.config.js如下

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //入口，表示要使用webpack打包哪个文件
    entry:'./src/main.js',
    //出口，输出文件相关的配置
    output:{
        path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中
        filename:'bundle.js'//指定 输出的文件名称
    },
    devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂
        open:true,
        port:3000,
        contentBase:'src',
        hot:true//启用热更新 第一步
    },
    plugins:[//配置插件的节点
        new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象  第三步
        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename:'index.html'//指定生成页面的名称
        })
    ],
    module:{//这个节点，用于配置所有第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则
        ]
    }
};

package.json如下


{
  "name": "MyProgram_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-dev-server": "^3.8.0"
  },
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "sass-loader": "^7.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  }
}

每次开启用npm run dev

webpack基本配置--超详细版加问题解决