webpack的安装及打包的常见问题

安装webpack真的废了好大的功夫，终于给它安装好了，被自己感动（蠢）哭了，接下来说一说我遇到了哪些问题。
1、确保安装好node.js，node.js自带npm，所以node.js安装完成后，不需要再安装npm
输入命令【node -v】 和 【npm -v】查看版本号，下图情况表示安装成功

2、创建配置文件【package.json】
输入命令【npm init】，配置package.json

3、安装webpack

npm install webpack -g (全局安装)

通常还是会在项目中安装局部的webpack，为了安装各自需要的模块

npm install webpack --save-dev

注意:webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g（全局安装）

输入命令【webpack -v】如果显示出版本号，则表示安装成功

输入命令【cat package.json】，就打开【package.json】配置文件，看到这里也有了webpack的版本信息

4、webpack安装成功之后，接下来就要进行webpack 打包演示了
cat.js

var cats = ['dave','henry','martha'];
module.exports = cats;

index.js（Entry Point）

cat = require('./cats.js');
console.log(cats);

然后要执行webpack，输入命令

webpack ./src/page/index/index.js ./dist/app1.js 

报了如下错误

在网上查了一下错误原因，是因为webpack版本高，原来的命令不适用，解决方法：

更换打包命令为 ：

 webpack ./src/page/index/index.js -o ./dist/app1.js --mode development

然后就顺利解决了

上边的方法是使用webpack命令行的形式，只能配置一个入口文件和一个目标文件，其他高级的功能无法配置
继续通过配置一个webpack.config.js，读取这个配置文件的参数，去做一个打包

配置webpack.config.js

const path = require("path");
module.exports = {
    mode: "development", //打包为开发模式
    // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
    entry: "./src/page/index/index.js", //入口文件,从项目根目录指定
    //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
    output: { 
        path: path.resolve(__dirname, "./dist"), //将js文件打包到dist目录下
        filename: "app.js",
    }
}

出现一个警告

在网上查了以下原因，因为webpack升级4.0新增mode属性
解决办法：
在package.json中设置：

"scripts": {
    "dev": "webpack --mode development",  // 开发环境
     "build": "webpack --mode production",  // 生产环境
  },

在webpack.config.js中设置：

module.exports = {
    entry: './src/page/index/index.js',
    output:{
         path:__dirname+'./dist',
         filename: "app.js"
    },
    mode: 'development' 
};

然后就打包成功了

打包结果

5、webpack4打包多个js文件
文件目录

（1）多个js文件分别打包
重新配置webpack.config.js

const path = require("path");
module.exports = {
    mode: "development", 
    entry: {
     index:"./src/page/index/index.js",
     login:"./src/page/login/index.js"
    },
    output: { 
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名

    }
}

打包结果

（2）多个js合并打包成一个js文件

const path = require("path");
module.exports = {
    mode: "development", 
    entry:["./src/page/index/index.js","./src/page/login/index.js"],
    output: {
        path: path.resolve(__dirname, "../mall-fe/dist"),
        filename: "js/[name].js" 
    }
}

看到两个js文件就被合并成一个main.js了

但是这种方式的扩展性非常差，如果page文件夹下增加了新的文件，那么就要重新修改webpack配置文件，非常麻烦。
这时候就可以用到glob，glob可以用类似通配符的方式来匹配文件。
首先安装一个glob,在命令行中执行

npm intall glob --save-dev

安装好glob之后，重新配置webpack.config.js

const path = require("path");
const glob = require("glob");
module.exports = {
    mode: "development",
    entry:glob.sync('./src/page/*.js'), //在数组中写上所有的js文件名并打包
    output: {
        path: path.resolve(__dirname, "./dist"), 
        filename: "[name].js",
    }
}

打包结果


当然也可以分类所要打包的文件，比如将js文件全部打包在js文件夹下
修改filename即可

 filename: "js/[name].js",

6、如何引入jQuery
（1）新建一个index.html

在浏览器中打开文件，看到脚本被引进来了

用命令行的方式将jQuery装上

npm install jquery --save

打开page/index.html，引入jQuery
然后打包一下，在浏览器中打开，看到jQuery被引入