webpack的使用（安装，配置）

（一）安装webpack （如果在安装过程中出现意外，可以看上一章“npm踩过的坑”可能会帮你解决安装失败的一些问题）

1.先全局安装：npm install webpack -g  一定要全局安装，不然在项目中使用本地安装webpack后，无法使用webpack命令

2.本地安装： npm install webpack --sava-dev  (其实本地安装后，使用的webpack命令是使用的全局的webpack命令)

（二）在webpack.config.js中的配置（看自己项目-单页面应用或多页面应用）

const path = require('path'); //node内置模块用来设置路径的

module.exports = {
    //单个入口文件的配置 --- 对应单页面应用程序
    // entry: './src/js/main.js', //文件入口
    // output: {                  //文件出口
    //     path: path.resolve(__dirname, 'dist/js'), //__dirname node内置模块 表示根目录
    //     filename: 'bundle.js', //生成文件名
    //     publicPath: "js/", // string //主要是为了找到js下的图片 （一般用作上线,修改http.../路径）
    // },
    //多个入口文件的配置 --- 对应多页面应用程序
    entry: {
        main: './src/js/main.js',
        main2: './src/js/main2.js',
    }, //文件入口
    output: {                  //文件出口
        path: path.resolve(__dirname, 'dist/js'), //__dirname node内置模块 表示根目录
        filename: '[name].js', //生成文件名
        publicPath: "js/", // string //主要是为了找到js下的图片 （一般用作上线,修改http.../路径）
    },
    //entry: ["",""] 将自己的js文件与第三方js文件相合并
    /**
     entry: {
        jQuery: ["",""],
        oneSelf: './src/js/my.js',
    }
     */
};

（三）在package.json中的配置 

其实主要是在scripts中的配置，这是webpack4.x的新特性

运行 npm run dev ：是开发过程中的编译打包，也就是不会压缩打包后的js文件

运行 npm run build ：是打包发布时，会压缩打包后的js文件

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},