webpack

最新推荐文章于 2022-09-03 14:29:53 发布

weixin_44816077

最新推荐文章于 2022-09-03 14:29:53 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_44816077/article/details/100111388

版权

webpack快速入门教程

###1、了解Webpack相关
* 什么是webpack
* Webpack是一个模块打包器(bundler)。
* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
* 理解Loader
* Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
* Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
* 它本身是一个函数，接受源文件作为参数，返回转换的结果
* loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。
* 配置文件(默认)
* webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
* 插件
* 插件件可以完成一些loader不能完成的功能。
* 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
* CleanWebpackPlugin: 自动清除指定文件夹资源
* HtmlWebpackPlugin: 自动生成HTML文件
* UglifyJSPlugin: 压缩js文件

###2、学习文档 :

webpack官网: http://webpack.github.io/
webpack3文档(英文): https://webpack.js.org/
webpack3文档(中文): https://doc.webpack-china.org/
###3、开启项目

初始化项目：

生成package.json文件

{
  "name": "webpack_test",
  "version": "1.0.0"
}

安装webpack
- npm install webpack -g //全局安装
- npm install webpack --save-dev //局部安装
  ###4、编译打包应用
创建入口src/js/ : entry.js
- document.write(“entry.js is work”);
创建主页面: dist/index.html
编译js-
- webpack src/js/entry.js dist/bundle.js

查看页面效果
###5、添加js/json文件

创建第二个js: src/js/math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

创建json文件: src/json/data.json
```
{
  "name": "Tom",
  "age": 12
}
```

更新入口js : entry.js

import {cube} from './math'
import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')

编译js:
```
webpack src/js/entry.js dist/bundle.js
```
查看页面效果
###6、使用webpack配置文件

创建webpack.config.js

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

module.exports = {
  entry: './src/js/entry.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'bundle.js',      // 输出文件名
    path: path.resolve(__dirname, 'dist')   //输出文件路径配置
  }
};

配置npm命令: package.json
```
"scripts": {
  "build": "webpack"
},
```
打包应用
```
npm run build
```

###7、打包css和图片文件

安装样式的loader

```
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
```

配置loader

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192      
          }
        }
      ]
    }
  ]
}

向应用中添加2张图片:
- 小图: img/logo.png
- 大图: img/big.jpg

创建样式文件: src/css/test.css

body {
  background: url('../img/logo.jpg')
}

更新入口js : entry.js
- import ‘…/css/test.css’

添加css样式

 #box1{
  width: 300px;
  height: 300px;
  background-image: url("../image/logo.jpg");
}
#box2{
  width: 300px;
  height: 300px;
  background-image: url("../image/big.jpg");
}

index.html添加元素

<div id="box1"></div>
<div id="box2"></div>

执行打包命令：
```
npm run build
```
发现问题：
- 大图无法打包到entry.js文件中，index.html不在生成资源目录下。
- 页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到
- 解决办法：
  - 使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
  - 将index.html放在dist/js/也可以解决。
    ###8、自动编译打包
- 利用webpack开发服务器工具: webpack-dev-server
- 下载
  - npm install --save-dev webpack-dev-server
- webpack配置
  devServer: {
  contentBase: ‘./dist’
  },
- package配置
  - “start”: “webpack-dev-server --open”
- 编译打包应用并运行
  - npm start
    ###9、使用webpack插件
常用的插件
- 使用html-webpack-plugin根据模板html生成引入script的页面
- 使用clean-webpack-plugin清除dist文件夹

下载

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

webpack配置
```
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
```
const CleanWebpackPlugin = require(‘clean-webpack-plugin’); //清除之前打包的文件

创建页面: index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack test</title>
</head>
<body>
<div id="app"></div>
<!--打包文件将自动通过script标签注入到此处-->
</body>
</html>

打包运行项目
```
npm run build
npm start
```

webpack4
webpack4需要安装脚手架
npm install webpack-cli -g

一将一个css文件处理成一个单独的文件
1.下载插件 npm install --save-dev mini-css-extract-plugin
2.在新建的webpack.production.config.js中引入插件miniCssExtractPlugin
3.在use数组中配置miniCssExtractPlugin.loader，并加入插件配置loader文件,采坑需细心
plugins: [
new MiniCssExtractPlugin({
filename: ‘[name].css’,
chunkFilename: ‘[id].css’,
}),
],

css压缩插件（插件使用方法都差不多）
在配置文件中设置
optimization:{
minimizer:[new OptimizeCssAssetsPlugin({})]
}
js压缩
一下载二压缩三设置

  html打包工具 optimization:{
          minimizer:[new OptimizeCssAssetsPlugin({
              title:'music',//title标签名
              filename:'index.html',
              template:path.resolve(__dirname,'src/main.html'),//模板
              minify:{
                  collapsWhitespace:false,//是否压缩
                  removeComments:true,//是否移除注释
                  removeAttributeQuotes:false //是否移除属性的引号
              }
          })]
      }
  1一个普及的管理插件
   npm install --save-dev clean-webpack-plugin
      const { CleanWebpackPlugin } = require('clean-webpack-plugin');
      new CleanWebpackPlugin([dist,src]),//清理dist,src中的多余重复文件

     new UglifyJsPlugin({cache:true,parallel:true,sourceMap:false})//设置插件压缩js

在package.json的scripts可配置执行脚本 “dist”:“npx webpack --config webpack.product.config.js”,可执行多次npm run dist

图片操作：
“file-loader”: “^4.2.0”,
图片优化
“url-loader”: “^2.1.0”,根据图片大小将图片转为base64;10000 也就是10kb 减少一次请求比file-loader强大

对webpack的配置文件进行配置合并，提取公共配置
对config配置文件进行梳理
改变暴露模块的方式 let devConfig = {}
在文件中引入webpack-commom.js
var common = require(’./webpack.common’);
//最后暴露

  module.exports = merge(commom,devConfig);//可传两个配置参数 (公共配置参数，当前)
devtool:'inline-source-map',//又利用解释说明js原始出错位置放在开发配置文件中

实时监控文件变化放在发开配置文件根目录下

watch: true,
watchOptions: {
    poll: 1000, // 每秒询问多少次
    aggregateTimeout: 500,  //防抖 多少毫秒后再次触发
    ignored: /node_modules/ //忽略时时监听
},

webpack-dev-server和热更新
会提供一个简单的web服务器并实现实时更新加载
安装
npm install --save-dev webpack-dev-server
在package.json中配置 “start”: “webpack-dev-server --open”
配置文件中
在配置文件中还要引入

const webpack = require('webpack');
devServer: {
      clientLogLevel:'warning',//可能的值有 none,error,warning 或者info(默认值)
      hot:true, //启用webpack的模块热替换特性，这个需要配合 webpack.HotModuleReplacementPlugin插件
      contentBase: path.join(__dirname,"dist"),//告诉服务器从哪里提供内容，默认情况下将使用当前根目录
      compress:true,//一切服务都启用gzip压缩
      host:'0.0.0.0',//指定使用一个host,默认是localhost,如果希望服务器外部访问就用0.0.0.0
      port:8080,//端口
      open:true,//是否打开浏览器
      overlay:{//出现错误或者警告的时候，是否覆盖页面上错误消息
        warnings:true,
        error:true
      },
      publicPath:'/',//此路径下的打包文件可在浏览器中访问。
      proxy:{//设置代理
          "/api":{
            target:'h',//访问api开面的请求，会跳转到下面的target配置
            pathRewrite:{"^/api":"mockisdata/5/api",},

          }
      },
      quiet:true //除了初始启动内容之外都没有输出
    },
    watchOptions: {//监视文件的相关控制选项
      poll: 1000, // 每秒询问多少次也可以是布尔值 webpack使用文件系统获取文件改动的通知
      aggregateTimeout: 500,  //防抖 多少毫秒后再次触发 当第一个文件夹更改，会在重新构建前增加延迟
      ignored: /node_modules/ //忽略监视的文件夹,正则表达式

  },

二。cmd打开帮助文档 npx webpack -h;
三。模拟后端接口，mock
首先安装
利用axios进行获取

Babel将新语法转换为es5语法

1.npm install -D babel-loader @babel/core @babel/preset-env webpack

2.配置

{
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory:true,
                presets: ['@babel/preset-env']
              }
            }
          },

3.创建.babelrc文件

{
    "presets": ["env"],  
}

3.优化

npm install -D @babel/plugin-transform-runtime --save-dev
npm install babel-runtime --save

在.babelrc文件文件中配置
webpack中配置：

 {
            //transform-runtime插件告诉babel要引用runtime来代替注入
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                cacheDirectory:true,
                presets: ['@babel/preset-env']
              }
            }
          },

4eslint验证配置

 npm install eslint-loader --save-dev
 npm install eslint --save-dev

在公共配置文件中配置

   {loader: "eslint-loader",
            options: {
              fix:true
            }
          }

根目录建立.eslintrc文件

module.exports= {

    //此项是用来告诉eslint找当前配置文件不能往父级查找
    root: true,
  
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
    parser: 'babel-eslint',
  
    //此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    parserOptions: {
      // 设置 script(默认) 或 module，如果代码是在ECMASCRIPT中的模块
      sourceType: 'module',
      "ecmaVersion": 6,
      "ecmaFeatures": {
        "jsx": true
      }
    },
  
    // 此项指定环境的全局变量，下面的配置指定为浏览器环境
    env: {
      "browser": true,
      "node": true,
      "commonjs": true,
      "es6": true,
      "amd": true
    },
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
    extends: 'standard',
    rules:{
      'generator-star-spacing':'off',
      'semi':['error','always'],
    },
    // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
    plugins: [
      'html',
      "flow-vars", 
      "react"
    ]
  }

4.建立不用验证文件.eslintignore
将不用验证的文件放进去
/dist/
/node_modules/
/*.js/

四resolve(解析重点)
1.resolve.alias 创建import或require的别名，确保模块引入变得更简单整个路径可以用 @url

 resolve: {
            alias: {
              xyz$: path.resolve(__dirname, 'path/to/file.js'),
              //@代表的是更目录配置别名
              '@':path.resolve(__dirname,'src/')
            }
            extensions:["js","vue","json"],//配置后不加后缀
          },

引入文件可用简写
import XXX from ‘@/XXX.js’

五。外部扩展(externals)
解释：可以CDN引入外部的库或组件，而不是打包到项目中。
在公共配置文件中配置externals{//将一个打包成外部依赖，不会打包到js文件中
jquery:‘jQuery’//这样就引入了文件库
}
在使用的html中CDN引入jquery,就可以在全局使用了

六.webpack打包分析工具
webpack-bundle-analyzer在开发环境下用
npm install --save-dev webpack-bundle-analyzer
在webpack.config.dev.js中引入插件const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;
然后在插件中配置
plugins: [
new BundleAnalyzerPlugin()
]

weixin_44816077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack

webpack快速入门教程###1、了解Webpack相关* 什么是webpack* Webpack是一个模块打包器(bundler)。* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源* 理解Loader* Webpack 本身只能加载JS/JSON模块，如果要加...
复制链接

扫一扫

webpack

“相关推荐”对你有帮助么？