个人整理的webpack学习文档

最新推荐文章于 2024-09-23 15:25:48 发布

weixin_34334744

最新推荐文章于 2024-09-23 15:25:48 发布

阅读量127

点赞数

文章标签： webpack javascript runtime ViewUI

原文链接：https://juejin.im/post/5c76434b518825407206a015

版权

webpack 安装

安装本地的webpack
yarn add webpack webpack-cli -D
-D 表示development 开发环境

webpack 可以进行0配置

目录结构
- src
  - index.js
直接运行 npx webpack
打包工具 -> 输出后的结果(js模块)
打包（直接js的模块化）

手动配置webpack

默认配置文件的名字是webpack.config.js/webpackfile.js 通常使用webpack.config.js
webpack 是基于node编写的

* 配置脚本命令 package.json

-- config 指定默认文件是哪个
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
"start":"npm run dev"
这样就可以通过npm run dev/npm run build执行相关的命令

* 配置出口入口

entry 入口可以是相对路径
output 出口输出
- path 输出路径必须是绝对路径
- filename: 输出的文件名字

module.exports={
  entry:'./src/index.js',
	output:{
	  path:path.resolve(__dirname,'dist'),
	  filename:'bundle[hash:6].js',
	  publicPath:'http://www.baidu.com'
	 }
}
复制代码

配置打包环境

mode 的值 2个值 development和 production

development 开发环境
production 生产环境

module.exports={
  mode:'development',
  ...
}
复制代码

* 开发服务器配置

yarn add webpack-dev-server -D

devServer:{
  port:3000, #端口号
  contentBase:'./dist', #目录
  open:true, #是否自动打开浏览器
  progress:true, #显示进度条
  compress:true  #是否开启gzip压缩
  proxy:{
    //可以配置跨域
  }
 }
复制代码

处理html

src
- index.js
- index.html
yarn add html-webpack-plugin -D
当有插件的时候需要配置plugins 插件集合类型是数组
每一个插件都是通过new来调用，例：new HtmlWebpackPlugin()
可以运行npm run dev/npm run build 查看结果

{
  * template:'./src/index.html',//模板
  * filename:'index.html', //编译后的文件名 
  hash:true,//加hash值 
  minify:{ //压缩配置   
    removeAttributeQuotes:true, //去除双引号
    collapseWhitespace: true,  //折叠去除空格
  }
}
复制代码

直接给文件加hash值

filename:'bundle[hash].js'
可以用:后面跟数字设置hash值的长度
filename:'bundle[hash:8].js'
复制代码

处理样式

src
- index.html
- index.js
- style.css
. index.js 通过require require('/style.css') 报错如下

You may need an appropriate loader to handle this file type
appropriate  合适的
你可能需要一个合适的loader 
复制代码

. 配置module,配置rules数组，表示很多规则，用正在匹配js、css等,rules里面配置不容的loader,每个loader的配置都是一个对象

module:{
  rules:[]
}
复制代码

loader的配置方法 test 匹配规则 use 使用什么loader

use的用法

字符串只能写一个loader use:'css-loader'
数组可以写多个loader 数组里面可以放字符串和对象 css-loader 解析require/import 语法 style-loader 把css插入到header标签中

use:['style-loader','css-loader'] loader 的执行顺序是从右到左执行从下到上

rules:[
 {
     test:'/\.css$/',//匹配以css结尾的文件
     use:[]
 }
]
复制代码

.use 可以直接写loader，也可以写成对象，写对象的时候可以进行配置 yard add css-loader style-loader -D

 {
   loader:'style-loader',
    options:{
     insertAt:'top'  //css 放置位置可以决定css的优先级
  }
复制代码

src
- index.html
- index.js
- style.css
- b.less
配置less编译(less->css) 因为从右向左，从下到上执行所以写在下边和右边 yarn add less less-loader -D
编译sass node-sass sass-loader -D
编译stylus stylus stylus-loader -D

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

抽离css

yarn add mini-css-extract-plugin -D
MiniCssExtractPlugin插件自带一个loader
MiniCssExtractPlugin.loader会自动把css抽离出来作为引用的方式引入页面

  new MiniCssExtractPlugin({
      filename: 'main.css' ##抽离出来的css的文件名
    })
  
复制代码

在loader里面的写法

  {
    test:/.css$/,
     MiniCssExtractPlugin.loader,
    'css-loader'
  }
复制代码

使用postcss-loader,autoprefixer添加浏览器前缀

yarn add postcss-loader autoprefixer -D

{
  test:/\.less$/,
  use:[
     MiniCssExtractPlugin.loader,
    'css.loader',
    'less-loader',
    'postcss-loader'
  ]
}
复制代码

放到所有cssloader后面，执行顺序原因

 npm run dev 的时候会报错
 Error: No PostCSS Config found in: /Users/ruanye/Desktop/project/src
 没有找到postcss的默认文件 
复制代码

需要配置postcss默认文件名字在根目录下创建 postcss.config.js
postcss.config.js 文件里面的内容：

 module.exports={
    plugins:[require('autoprefixer')]
  }
复制代码

* 配置优化项

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D optimize : 优化 assets :资源

optimization: { 优化
    minimizer: [
      new UglifyJsPlugin({
        cache: true, //缓存 
        parallel: true, //是否并发打包
        sourceMap: true // 源码映射
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  }
复制代码

mode 改成 production
npm run build 打包之后 csss是压缩过的

处理js es6转化成es5

yarn add babel-loader @babel/core @babel/preset-env

@babel/core babel 核心模块 @babel-preset-env 标准语法转化成低级语法

presets 预设
箭头函数 arrow-functions
class等(装饰器需要安装额外的插件) 并且添加plugins集合
yarn add @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}
复制代码

babel 插件中最常用的插件 promise genarater 需要 @babel/plugin-transform-runtime
yarn add @babel/plugin-transform-runtime 生产环境也需要runtime 不加-D yarn add @babel/runtime
es7的一些语法需要其他的例如：inclueds 补丁包 yarn add @babel/polyfill require("@babel/polyfill")

配置需要解析和不需要解析loader的文件路径

include 包含 include:path.resolve(__dirname,'src'),
exclude 不包含 exclude:/node_modules/

{
       test:/\.js$/,
				use:{
					loader:'babel-loader',
					options:{
            ...
          },
				  include:path.resolve(__dirname,'src'),
			  	exclude:/node_modules/
        }
复制代码

babel 也可以独立进行配置，文件名字.babelrc

配置的时候loader 直接写成 use:'babel-loader',其他配置写在.babelrc里面

 {
   presets:['@babel/preset-env'],
   plugins:[
     ....
   ]
 }
复制代码

如果webpack options对babel-loader进行了配置不需要.babelrc文件如果有的就删除

js语法校验

yarn add eslint eslint-loader -D
eslint 官网 eslint.org
添加enforce pre 强制先执行 previous 前置loader
另一种配置方法 .eslint.js
.eslintignore elsint的忽略项

{
  test:'/\.js$/',
  loader:'eslint-loader',
  options:{
     enforce:'pre'
    }
}
复制代码

第三方模块的使用

yarn add jquery
yarn add expose-loader -D
expose-loader 暴露全局的loader

内联loader的方式配置

  import $ from "expose-loader?$!jquery"
复制代码

正常loader配置

{
  test:require.resolve('jquery'),
  loader:"expose-loader?$"
}
复制代码

在每个模块中注入这里window.$是undefined
在plugins配置,ProvidePlugin webpack 自带插件
自带插件都需要引入webpcak模块

let webpack = require('webpack')
...
 new webpack.ProvidePlugin({
      $:"jquery"
    })
复制代码

配置忽略打包项

externals:{
    jquery:"jQuery"
}
复制代码

在webpack中引入图片的几种方式

src
- index.js
- style.css
- b.less
- index.html
- logo.png

在js中创建图片来引入 import logo from './logo.png'; let img = new image ; img.src = logo document.body.appengChild(img) 会在内存里面创建一个新的图片

You may need an appropriate loader to handle this file type
你需要一个合适的loader去处理这个文件类型
复制代码

在css 引入 background(url)
需要把图片放到dist文件夹

图片处理

yarn add file-loader html-withimg-loader url-loader -D file-loader

{
  test:/\.(png,jpg,gif)$/,
  user:'file-loader'
}
复制代码

在html 引入图片打包会找不到文件需要使用html-withimg-loader

{
  test:/\.html$/,
  user:'html-withimg-loader'
}
复制代码

在图片非常小的情况下不希望走http请求，一般情况下不会直接使用file-loader 通常我们使用url-loader
在图片小于多少k的时候可以做一个限制，用base64来转化,base64大小会比原来文件大3分之1
limit 限制图片大小多大以内转成base64 { test:/.(png,jpg,gif)$/, user:{ loder:'url-loader', options:{ limit:10000 表示多少字节 1024 字节是1kb } } }
url-loader 可以处理mp4|webm|ogg|mp3|wav|flac|aac
url-loder 可以处理各种字体格式 woff2?|eot|ttf|otf

{
     test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000
         
        }
      }
复制代码

* 打包文件分类

图片loader的options 里面添加 options:{ limit:1000 outputPath:'/img/', }
css 添加在css插件里面 new MiniCssExtractPlugin({ filename:'css/main.css' })
js添加到filename 前面 filename:'js/main[hash].js',
添加域名 publicPath的用法
output: { filename: 'bundle.js', path: path.resolve(__dirname, 'build'), publicPath:'www.baidu.cn' }