webpack的安装及打包

1.创建项目目录并初始化

创建项目，并打开项目所在目录的终端，在命令框输入命令：

npm init -y

2.创建首页及js文件

创建一个src文件，在src里创建index.html页面，初始化页面结构：在页面中摆放一个ul，ul里面放置几个li，并在文件夹中创建index.js文件

安装jQuery

打开项目目录终端，输入命令:

npm install jQuery -S

导入jQuery

打开index.js文件，编写代码导入jQuery并实现功能：

3.然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack

在 webpack.config.js 文件中编写代码进行webpack配置，如下：

module.exports = {
        mode:"development",//可以设置为development(开发模式)，production(发布模式)
}

4.修改项目中的package.json文件添加运行脚本dev，如下：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

5.安装依赖：

npm install -D

可能还需要重新安装jquery

npm install jquery -S

6.运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件

打开项目目录终端，输入命令:

npm run dev

等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。

 

7.设置webpack的打包入口/出口

在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件 默认会将dist/main.js 作为默认的打包输出js文件 如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：

const path = require('path');
module.exports = {
        mode:"development",
        //设置入口文件路径
        entry: path.join(__dirname,"./src/index.js"),
        //设置出口文件
        output:{
            //设置路径
            path:path.join(__dirname,"./dist"),
            //设置文件名
            filename:"handle.js"
        }
}

8.然后在命令框输入：

npm run dev   或者 webpack

将引入的js文件路径更改为：

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

9.设置webpack的自动打包

1. 安装自动打包功能的包:webpack-dev-server

npm install webpack-dev-server -D

2.修改package.json中的dev指令如下：

"scripts":{
    "dev":"webpack-dev-server"
 }

3.将引入的js文件路径更改为：

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

4.运行npm run dev，进行打包

npm run dev

打开网址查看效果：http://localhost:8080

10.实现默认预览页面功能的步骤如下：

1.安装默认预览功能的包:html-webpack-plugin

npm install html-webpack-plugin -D

2.修改webpack.config.js文件，如下：

 //导入包
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 //创建对象
 const htmlPlugin = new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
     template:"./src/index.html",
     //设置生成的预览页面名称
     filename:"index.html"
 })

3.继续修改webpack.config.js文件，添加plugins信息：

module.exports = {
                ......
                plugins:[ htmlPlugin ]
}

11.webpack中的加载器

1.安装style-loader,css-loader来处理样式文件

npm install style-loader css-loader -D

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
 }

2.安装less,less-loader处理less文件

npm install less-loader less -D

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
 }

3.安装sass-loader,node-sass处理less文件

npm install sass-loader node-sass -D

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
 }

4.打包样式表中的图片以及字体图标文件

npm install url-loader file-loader -D

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

常用的用的差不多就这些，谢谢阅读，喜欢记得关注加收藏呦！