webpack实战入门 | 易学教程

webpack

1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图
2. Webpack就是负责从我们指定的一个文件为入口，以入口文件为基础，然后依据环环相扣的关系，把我们写的每个需要使用的功能模块找到，构建出一个依赖关系，然后把它们优化、压缩、打包，最后生成最完美的文件。
3.webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

webpack打包的好处

1. 程序员在开发的时候需要更好的代码布局，比如有空格、有换行、有注释、错落有致
2. 浏览器望能更快的解析代码，而不是更好的看懂代码。所以Webpack的主要作用就是压缩、优化我们写的代码，把多余的东西去掉，然后按照浏览器喜欢的风格来编排代码！

webpack的使用

1. 新建项目空白目录 运行 npm init -y命令 初始化包管理配置文件 package.json
2. 新建src源代码目录，将项目的源代码放在这个目录下
3. 安装webpack   npm i webpack webpack-cli -D
    - 在package.json文件的devDependencies中出现了安装的webpack和webpack-cli，就代表安装成功
3. 在项目的根目录自行创建 webpack.config.js 文件 （所有的配置都写这里）

配置前打包操作演示

1. 修改项目中的package.json文件添加运行脚本dev如下
 "scripts":{
       "dev":"webpack"
  }
2. 在演示运行的时候需要初始初始配置打包模式
module.exports = {
    mode: 'development' // 可以设置为development(开发模式)，production(发布模式)
 }
- 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
- 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些
- scripts节点下的脚本，可以通过npm run运行 如 npm run dev  将会启动webpack进行项目打包
3. 等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。浏览页面查看效果。

开始配置

1. 在webpack 4.x 中，默认会将src/index.js 作为默认的打包入口js文件
2. 默认会将dist/main.js 作为默认的打包输出js文件
3. 可以修改默认的打包的入口和出口文件
// 在webpack.config.js内，我们需要将所有配置当成一个对象导出
4. 引入node.js 中专门操作路径的模块
const path = require('path')
module.exports = {
    // 1. 项目编译模式
    mode: 'development' ,
    // 2. 配置打包的入口和出口文件
    entry: path.join(__dirname, './src/xx.js'), // 指定某入口文件的路径,
    output: {
        // 设置路径
        path: path.join(__dirname,'./dist'),
     // 设置文件名
     filename: 'bundle.js'
    }
}

webpack 配置自动打包

1. 在默认的情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，那么每次都要重新执行命令，这是一个非常繁琐的事情，自动打包可以解决这样繁琐的操作
2. 安装自动打包功能的包:webpack-dev-server
    -  npm install webpack-dev-server -D
3. 修改package.json中的dev指令如下
 "scripts":{
     "dev":"webpack-dev-server"
   }
4. 将引入的js文件路径更改为 <script src="/bundle.js"></script>
5. 运行npm run dev，进行打包
6. 打开网址查看效果：http://localhost:8080
7. webpack-dev-server自动打包的输出文件(bundle.js)，默认放到了服务器的根目录中.是虚拟的看不见的
8. webpack-dev-server 会启动一个实时打包的http服务器，实现方式就是打开package.json文件 
9. 修改dev命令：  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
10. webpack-dev-server也需要配置部分参数可以单独拿出来配置
module.exports = {
 // 开发服务器的配置
 devServer: {
   port: 8080, // 改变开启的端口号
   progress: true, // 开启内存打包中的进度条，这样我们能清楚地看到打包的进程
   open: true, // 自动打开浏览器
   compress: true //压缩
 },
}

配置html-webpack-plugin 生成一个预览页面

0. 因为我们的网页不能只有JS代码，网页最根本的还是需要一个HTML文件。但是Webpack只会打包JS，因此我们就要引入一个HTML模板。模板HTML，其实就是一个最原始HTML文件，我们通常将其命名为index.html。它的作用主要是：为html文件中引入打包后的外部资源，如script、link标签里的JS、CSS文件。
1. 因为当我们访问默认的 http://localhost:8080 的时候，看到的是一些文件和文件夹，想要查看我们的页面还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
2. 安装默认预览功能的包:html-webpack-plugin
 -  npm install html-webpack-plugin -D
3. 修改webpack.config.js文件，如下：
 //导入包
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 //创建对象
 const htmlPlugin = new HtmlWebpackPlugin({
      // 设置生成预览页面的模板文件
      template:"./src/index.html", // 模版路径，一般放在public文件夹下
      // 设置生成的预览页面名称
      filename:"index.html", // 打包后的文件名
     // minify 对打包的html模版进行压缩
     minify: {
        removeAttributeQuotes: true, // 删除属性的双引号，除了一些特殊的删除不了以外都能删除
        collapseWhitespace: true,    // 折叠空行将所有代码变成一行
        removeComments: true         // 移除注释
      },
      hash: true // 给打包后在模板中引入的文件名生成hash戳，防止缓存
  })
4. 继续修改webpack.config.js文件，添加plugins信息：
 module.exports = {
       ......
       plugins:[ htmlPlugin ]
  }
5. 打包后，dist文件夹内的index.html自动引入了Webpack打包后的文件

配置自动打包相关的参数

1. package.json 中的配置
  1. --open 打包完成后自动打开浏览器
 2. --host 配置Ip地址
  3. --port 配置端口
2. "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

webpack打包静态资源

1. Webpack在设计时，只是用来打包JavaScript文件的代码。但是我们知道，一个网页不可能只存在JS代码和一个HTML模板，还有图片资源、CSS资源、文件资源等其他资源。并且，网页中的CSS样式也不可能一成不变，可能你点击某个按钮时页面的排版就变了。其实本质上就是CSS变了，我们将这种情况叫做动态CSS。
2. 我们知道，对于已经写死不需要修改的CSS，一般在HTML中通过link标签引入就可以了。但是对于动态CSS，必须要在特定的时候才能起作用，所以我们不能直接通过link标签引入。
3. 因此，我们需要使用JS来控制动态CSS，而webpack本身不提供CSS的打包处理方法。为此，我们需要一些插件来补充Webpack的功能
4. 其实，处理静态资源是有固定的套路的：
--> 下载对应的loader；
--> 配置相应的规则，让Webpack识别，然后调用loader
5. loader就是解析器的意思，处理不同的资源要使用及下载不同的loader。再配置相应的规则，让webpack明白我们要使用什么样loader，处理什么样的文件。

打包css/scss/less资源

1. CSS资源在一个网页里面是不可却少，处理普通的css文件只需要css-loader与style-loader就可以实现。
2. 安装对应的loader -->   npm i css-loader style-loader -D
3. css-lodaer与style-loader需要在Webpack.config.js下的module的rules内进行配置
    module.exports = {
    plugins:[htmlPlugin],
    module: {
      rules: [
        //处理css的规则
        {
          // test 设置需要匹配的文件类型，支持正则
          test:/\.css$/,
          user:['style-loader','css-loader', 'postcss-loader']
        },
        // 处理less的规则    
        {
           test:/\.less$/,
           use:['style-loader','css-loader','less-loader']
        },
        {
           test:/\.scss$/,
           use:['style-loader','css-loader','sass-loader']
        }
      ]
    }
  }
4. 安装less,less-loader处理less文件  npm install less-loader less -D
5. 配置规则和css写在一起
6. 安装sass-loader,node-sass处理less文件  npm install sass-loader node-sass -D
7. 配置规则和css写在一起
8. postCss是对 CSS 进行处理的一种工具
        - 把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构
    - 调用插件来处理 抽象语法树结构 并得到结果
9. 安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
        -  npm install postcss-loader autoprefixer -D
10.在项目根目录创建并配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}
11. 在css文件中添加 postcss-loader

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

1. 在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
2. 使用url-loader和file-loader来处理打包图片文件以及字体文件
3. 安装对应的loader  -->  npm install url-loader file-loader -D
4. 配置规则：更改webpack.config.js的module中的rules数组添加下列规则
{
     test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
     //limit用来设置字节数，只有小于limit值的图片，才会转换
     //为base64图片
     use:"url-loader?limit=16940"
 }

打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法

1. 有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码,我们需要安装babel系列的包
2. 安装babel转换器
        -  npm install babel-loader @babel/core @babel/runtime -D
3. 安装babel语法插件包
        -  npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
4. 在项目根目录创建并配置babel.config.js文件
 module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-             properties" ]
 }
5. 配置规则：更改webpack.config.js的module中的rules数组添加下列配置
{
     test:/\.js$/,
     use:"babel-loader",
     //exclude为排除项，意思是不要处理node_modules中的js文件
     exclude:/node_modules/
 }

SourceMap

1. SourceMap的使用特别简单，不需要安装任何插件。我们只需要加一个devtool就可以打开SourceMap，代码
module.exports = {
    mode: 'development',
    devtool:'source-map'    
}
2. SourceMap是一种提供源代码到构建后代码映射技术；
3. 如果开启了SourceMap，则代码出错时，通过映射可以追踪代码错误的位置；
4. 外部映射：打包后每一个js文件都会生成一个名字相同的js.map文件；
5. 内联映射：映射代码和打包代码写在一起，不单独生成js.map文件。

来源：oschina

链接：https://my.oschina.net/u/4339343/blog/4632257

标签

javascript

Webpack

Source-map