Webpack安装（开发环境）

什么是webpack

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。

在webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

Webpack基本概念

入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。

输出(Output)：指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。

Loader：让 webpack 能够去处理那些非 JS 的文件，比如样式文件、图片文件(webpack 自身只理解 JS)

插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。

模式(Mode)：指示 webpack 使用相应模式的配置。

安装步骤

1.创建项目

创建一个新的文件夹

双击打开，在此位置输入cmd，并按enter键，打开dos窗口

在窗口输入

npm init –y 

在webpack3文件夹下生成 package.json 文件

安装webpack

在dos窗口输入

npm install webpack webpack-cli --save-dev

安装完毕，webpack3文件夹下一共三个文件夹

在webpack3文件夹下面创建一个名为src和dist(打包成功后的文件都在里面，可以随时删除，成功后会自己生成)的文件夹

打包js文件

在src文件夹里面新建一个js文件夹，在里面建立入口js文件index.js和我们想要打包的js文件mathUtils.js

mathUtils.js

index.js

使用webpack命令打包js文件

在dos窗口输入

webpack ./scr/index.js -o ./dist

会有一个警告，原因使用webpack没有指定mode为 development（开发模式）或者为production（生产模式）

在dos窗口输入命令：

webpack ./src/index.js -o ./dist --mode=development

显示打包成功

虽然输入webpack命令很方便，但是不符合我们的使用习惯，一般来说我们使用的是

所以，在package.json中的scripts中加上："build": "webpack"即可

在dos命令输入npm run build,打包成功               

测试

在src目录下新建一个index.html文件，导入main.js

运行到浏览器(如图测试，打印成功)

使用loader打包

loader是webpack中一个非常核心的概念。

lodaer可以将js、图片、css处理打包，但是对于webpack本身是不能处理css、图片、ES6转ES5等。

此时就需要webpack的扩展，使用对应的loader就可以。

Css文件的打包

.将除了入口文件（index.js）所有js文件放在js文件夹，新建一个css文件夹，新建一个normal.css文件

记得在webpack.config.js中修改路径

在normal.css中输入

 index.js导入normal.css文件

安装css-loader和style-loader

npm install --save-dev css-loader style-loader

css-loader只负责加载css文件，不负责解析，如果要将样式解析到dom元素中需要使用style-loader。

配置webpack.config.js

module: {
                 // 配置style,css
                 rules: [{
                         test: /\.css$/, //正则表达式匹配css文件
                         //css-loader只负责css文件加载，不负责解析，要解析需要使用style-loader
                         use: [{
                                  loader: 'style-loader'
                         }, {
                                  loader: 'css-loader'
                         }] //使用loader
                 }]
        }

webpack使用多个loader是从右往左解析的，所以需要将css-loader放在style-loader右边，先加载后解析

打包成功 npm run build

运行index.html

Less文件处理

在css文件夹中新增一个special.less文件

@fontSize:50px;//定义变量字体大小
@fontColor:orange;//定义变量字体颜色
body{
  font-size: @fontSize;
  color: @fontColor;
}

导入css文件

安装less-lodaer

npm install --save-dev less-loader less

在webpack.config.js 中配置less-loader

{
                                  test: /\.less$/,
                                  use: [{
                                                   loader: 'style-loader'
                                          },
                                          {
                                                   loader: 'css-loader'
                                          },
                                          {
                                                   loader: 'less-loader'
                                          }
                                  ]

                         },

打包npm run build

打包成功

字体是orange，大小为50px。

图片文件的处理

这里可以不用下载loader

直接配置webpack.config.js

​
{

                       test: /\.(png|svg|jpg|jpeg|gif)$/i,

                       type: 'asset/resource',

                       generator: {

                             filename: 'images/[hash][ext][query]'

                       } //把打包的图片放到images文件夹              

                  },

​

在src中创建img文件夹，放入一张图片，在normal.css中，使用这张图片

Dist文件夹，生成inages文件夹，里面有一张图片

打包 npm run build(如图所示，打包成功)

打包html资源

安装loader和html-webpack-plugin

npm install --save-dev html-webpack-plugin html-loader

配置webpack.config.js

// 配置html-loader,打包可以加载出图片    

​
 {

                test: /\.html$/i,

                loader: "html-loader",

            },

​

       

打包其他资源

配置

{

                test: /\.(woff|woff2|eot|ttf|otf)$/i,

                type: 'asset/resource',

                generator: {

                   filename: 'fonts/[hash][ext][query]'

                } //把打包的字体图标放到fonts文件夹       

            },

配置devServe

/ 开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）

      // 特点：只会在内存中编译打包，不会有任何输出（不会像之前那样在外面看到打包输出的build包，而是在内存中，关闭后会自动删除）

      // 启动devServer指令为：npx webpack-dev-server

      //不会生成dist文件

      // 页面要手动刷新

devServer:{

             /* contentBase: resolve(__dirname, 'dist'), */

             compress: true,

             // 端口号随意配置

             port: 3000,

             hot:true,

             open: true,

        },