Webpack 4+基本使用

一、安装

• npm i webpack -g，全局安装webpack，就可以在全局使用webpack命令。只要安装一次，电脑没啥bug，后面就再也不需要安装了。这里进行了全局安装作为测试。（不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。）
• npm i webpack --save-dev，在项目根目录中运行，安装到项目依赖中。对于大多数项目，我们建议本地安装。

注意：webpack 4+版本，还需要安装webpack-cli。npm i webpack-cli -g和npm i webpack-cli --save-dev。
webpack-cli是 webpack 的命令行工具。让我们可以不用写打包脚本，只需配置打包配置文件，然后在命令行输入 webpack --config webpack.config.js 来使用 webpack。

二、使用测试
1、创建工程。通常有目录结构：

• src，源码
• dist，项目发布文件夹，直接把dist给用户（产品级）
• index.html，首页
• main.js，项目的JS入口文件

2、初始化项目
在项目目录（或者vscode终端中），npm init -y，初始化生成一个新的 package.json文件，-y即代表跳过提问阶段默认全部yes（package.json 文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等）。

3、引入jquery。

• 项目要用npm去安装jquery。
• npm i jquery -S，npm安装jquery，完成后目录会出现node_modules文件夹，里面有安装下来的jquery。
  
  
• 引入jquery.js。注意：不推荐直接在html中引用，会导致二次请求拖慢速度。所有东西都在main.js中去写，将来页面直接引入main.js。

//导入jquery（ES6）
import $ from 'jquery'

即表示：从node_modules中导入jquery的包，用$变量名接收。（好比Node.js中：const $ = require('jquery')）

4、在main.js中写逻辑。
使列表隔行变色。

//main.js 项目JS的入口文件

//导入jquery
import $ from 'jquery'

$(function(){
    console.log('执行开始');
    $('li:odd').css('backgroundColor','lightblue');   //奇数行
    $('li:even').css('backgroundColor',function(){
        return '#'+'D97634';
    });   
});

5、在index.html中引入main.js。
这时候运行一下，就会发现问题：ES6的import语法，浏览器无法识别解析。

6、使用Webpack进行处理。
如果在项目中直接执行(npx)webpack，则会进行默认打包，将src下的入口文件index.js进行打包生成一个dist目录并存在一个打包好的main.js文件。
但实际开发中，根本不会使用0配置。

• 在项目中创建 webpack 配置文件 webpack.config.js（默认，可修改）。此文件其实就是个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
  正常配置：

module.exports = {
    entry: '',               // 入口文件配置
    output: {},              // 出口文件配置
    module: {},              // 处理对应模块，例如解读CSS、图片如何转换压缩
    plugins: [],             // 对应的插件
    devServer: {},           // webpack开发服务器配置
    mode: 'development'      // 模式配置
}

根据实际项目配置：

const path = require('path');   //webpack基于Node.js，可以直接用，path模块

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),    // 入口文件，要用webpack打包哪个文件
    output: {   //输出文件相关的配置
        filename: 'bundle.js',      // 输出文件的名称
        path: path.resolve('dist')  // 打包后文件的输出目录，必须是绝对路径
    },
    mode: 'development'
}

• 使用新的配置文件进行构建(npx) webpack --config webpack.config.js，此时dist文档下出现一个bundle.js的文件。（如果配置文件名为webpack.config.js可直接执行webpack不需要--config指定配置文件，默认）
  
  
  
  注意：执行webpack时可能会出现警告，即未设置mode(模式)。
  
  
  
  mode是webpack中独有的，有两种打包环境：开发环境development和生产环境production。
  webpack.config.js需要指定模式mode: 'development/production'；或者执行webpack打包命令时指定模式webapck --mode=production/production。

• index.html导入此新构建好的js文件，运行成功。
  
  
  

三、npm脚本运行
每次执行 webpack-cli 不方便，我们可以把它添加进npm脚本。
在 package.json的scripts中，可以配置一些我们要运行的命令，添加：

"scripts": {
    "build" : "webpack --config=webpack.config.js"
}

这个时候我们在终端执行输入命令npm run build则代表会执行后面的命令。