架构师的御宅

Appearance

On this page

webpack总结 ​

介绍 ​

webpack是一个流行的前端打包工具，它提供了友好的模块化支持和代码压缩混淆、处理js兼容、性能优化等强大功能，大大提高了开发效率和项目等可维护性！

安装 ​

  1. 新建一个项目文件夹

  2. 进入项目根目录初始化配置: npm init -y ,根目录下就会新建一个 package.json 文件.

  3. 安装 webpack 、 webpack-cli

    sh
    # npm
npm i webpack webpack-cli -D
# yarn
yarn add webpack webpack-cli -D

基本配置 ​

在根目录下新建 webpack.config.js 文件,用来做webpack的配置

js
// 导入node.js中专门操作路径的模块
const path = require('path');
module.exports={
  //打包入口文件路径
  entry: path.join(__dirname,'./src/index.js'), 
  //指定构建模式：
  //1.development:开发模式，打包不会压缩混淆，转化速度快
  //2.production:上线模式，打包会自动对代码进行压缩和各种优化。
  mode: 'development', 
  output: {
    //输出文件存放路径
    path: path.resolve(__dirname, 'dist'),
    //输出文件名称
    filename: 'main.js'
  }
};

新建一些基本的文件,结构如下:

webpack文件结构

编辑index.html

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色demo--Webpack初次打包</title>
</head>
<body>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
  </ul>
</body>
</html>

编辑index.js

编辑之前通过 npm i jquery -P 安装jquery依赖

js
// index.js 是项目的入口文件
// 1.导入jquery
import $ from 'jquery' //ES6导入模块的方式
$(function () { 
  $('li:odd').css('backgroundColor','red')
  $('li:even').css('backgroundColor','orange')
})

webpack-dev-server ​

webpack-dev-server 是用来实现webpack自动打包编译的工具

本地安装: npm i webpack-dev-server -D

第一种配置方式:

在项目根目录下配置package.json文件,在 "script" 字段下添加一项dev命令：

js
"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot 128.0.0.1"
},

后面参数的意思:

​ --open 自动打开浏览器;

​ --port 3000 使用3000端口;

​ --contentBase src 以src作为根目录打开页面

​ --hot 开启热更新

第二种配置方式:

同样在项目根目录下 package.json 文件中,在 "script" 字段下添加一项配置

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

然后在 webpack.config.js 文件中添加如下配置:

js
const path = require('path');
const webpack = require('webpack');// 启用热更新(第二步)
module.exports={
  entry: './src/index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  devServer: { // devServer是webpack-dev-server的配置
    open: true, // 自动打开浏览器
    port: 3000, // 启动时运行3000端口
    contentBase: 'src', // 设置托管根目录
    hot: true // 启用热更新(第一步)
  },
  plugins: [ // 配置插件的节点
    new webpack.HotModuleReplacementPlugin() // new一个热更新的模块对象  启用热更新(第三步)
  ]
};

配置完了之后运行 npm run dev 就可以自动打包编译了

TIP

启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中,我们可以认为 webpack-dev-server 把打包好的文件是以一种虚拟的形式托管到了项目的根目录中

常用插件与loader ​

  1. html-webpack-plugin

    html-webpack-glugin 是用来直接为项目生成HTML文件(存在内存中)，并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数控制HTML文件的输出。

    本地安装: cnpm i html-webpack-plugin -D

    在 webpack.config.js 中引入这个插件并创建实例对象:

    js
    const htmlWebpackPlugin= require('html-webpack-plugin');
var htmlPlugin new htmlWebpackPlugin({
  template: path.join(__dirname,'./src/index.html'),// 要生成到内存中的文件模板
  filename: 'index.html' // 生成到内存中的文件名
})

    然后在module.exports里的plugin属性上挂载:

    js
    plugin: [htmlPlugin]

  2. Babel

    Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

    Babel就是为了支持原有的旧的环境。

    安装相关依赖:

    sh
    npm i babel-loader @babel/core @babel/runtime -D
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

    这里如果出现报错: peerDependencies WARNING babel-loader@* requires a peer of @babel/core@^7.0.0 but none was installed,说明版本更新了,可以按他的提示安装:cnpm i babel-loader@7

    在根目录中新建一个 babel.config.js 配置文件:

    js
    module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

    在 webpack.config.js 中module属性下做如下配置:

    js
    module: {
  rules: [
    { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
    //需要通过exclude排除node_modules文件夹的转换
  ]
}

    配置好了之后打包就会自动把ES6语法转换成浏览器能识别的语法了!

  3. css-loader 与 style-loader

    webpack 默认只可以打包js文件,如果想要打包 css的时候 就需要引入 style-loader 和 css-loader两个插件

    css-loader 的作用是把 css文件进行转码,style-loader 的作用是把转码后的css文件插入到相应的文件中去,所以两者使用的时候是一起使用的缺一不可并且有先后顺序的,先css-loader后style-loader

    本地安装: cnpm i css-loader style-loader -D

    在 webpack.config.js 中添加一项和plugins平级的属性 module,做以下配置:

    js
    module: { //配置所有第三方模块加载器
  rules: [ //匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    // 注意:use下的style-loader和css-loader不能写反了,因为使用的时候是从后向前的，所以会先使用 css-loader转换，再使用 style-loader 插入
  ]
}

  4. less-loader 与 sass-loader

    less-loader 的作用是把less文件转成css文件,由于它依赖于less所以在安装less-loader的同时也需要安装less

    sass-loader 的作用是把sass文件转成css文件,由于它依赖于node-sass所以在安装sass-loader的同时也需要安装node-sass

    本地安装: cnpm i less-loader less -D cnpm i sass-loader node-sass -D

    安装sass-loader时如果报错:

    cmd
    peerDependencies WARNING sass-loader@^8.0.0 requires a peer of sass@^1.3.0 but none was installed
peerDependencies WARNING sass-loader@^8.0.0 requires a peer of fibers@>= 3.1.0 but none was installed

    说明 sass-loader8.0有些节点版本不对应,则安装7版本的sass-loader就行:

    cnpm i sass-loader@7

    在安装less时可能也会出现同样情况,只需降低版本即可!

    在 webpack.config.js 中module属性下做如下配置:

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

  5. posts-loader与autoprefixer

    postCSS可以自动帮我们在css前加上用于兼容问题的浏览器前缀

    安装：cnpm i postcss-loader autoprefixer -D

    在 webpack.config.js 中添加:

    js
    // 导入包
const autoprefixer=require('autoprefixer');
module.exports = {
  ...
  // 挂载到plugin上
  plugin:[autoprefixer],
  module: {
    // 添加规则
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader','post-loader'] }
    ]
  }
}

  6. url-loader && flie-loader

    url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片

    file-loader可以解析项目中的url引入,根据我们的配置修改打包后文件引用路径，使之指向正确的文件。

    本地安装: cnpm i url-loader flie-loader -D

    在 webpack.config.js 中module属性下做如下配置:

    js
    module: {
  rules: [
    {
      test: /\.(jpg|jpeg|png|gif|ttf|eot|woff|woff2|bmp|svg)$/,
      use: ['url-loader?limit=7000&name=[hash:10]-[name].[ext]']
    }
    /* 'url-loader'可以做以下可选配置:
      limit: limit 给定的值是图片的大小，单位是byte(字节)，如果我们引用的图片≥给定的值,则不会被转为base64格式的字符串，如果图片<给定的值,则会被转为base64的字符串
      name: 设置图片被编译后的名称
     */
  ]
}

  7. vue-loader && vue-template-compiler

    webpack默认无法打包 .vue 文件,所以需要安装vue-loader 和 vue-template-compiler

    本地安装: cnpm i vue-loader vue-template-compiler -D

    在 webpack.config.js 中module属性下做如下配置:

    js
    module: {
  rules: [
    { test: /\.vue$/, use: ['vue-loader'] }
  ]
}

    配置好之后就可以打包 .vue 文件了

  8. vue-loader15.x 配置

    以上配置在vue-loader15.x版本会报错:Module parse failed: Unexpected token (2:0)

    则需要在 webpack.config.js 里添加:

    js
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
new VueLoaderPlugin(); //这一行添加到 plugins 里

    配置好之后就不会报错了!

打包 ​

当一切配置完成后就可以运行 npx webpack 进行打包了!!!

打包成功后在dist文件夹下就会多出一个打包后的文件 main.js

© 2021 全栈Boor AllRightsReserved. 赣ICP备2021004721号-2