Webpack基础

作者: chang_遇见缘 | 来源:发表于2019-11-22 15:01 被阅读0次

1、webpack的安装

本教程是基于最新的webpack4.39.3 版本

注意：webpack是基于node的，所以使用前请先自行安装nodejs环境

全局安装webpack（不推荐）

npm i webpack webpack-cli -g
项目中安装webpack (推荐)

新建一个空文件，然后初始化npm init -y初始化一个package.json文件

然后去下载npm i webpack webpack-cli -D

2、webpack的使用

①.webpack-cli

npm 5.2 以上的版本中提供了一个npx命令

npx 想要解决的主要问题，就是调用项目内部安装的模块，原理就是在node_modules下的.bin 目录中找到对应的命令执行

使用webpack命令：npx webpack

webpack4.0之后可以实现0配置打包构建，0配置的特点就是限制较多，无法自定义很多配置,默认打包./src/index.js文件，默认打包到./dist文件夹下

开发中常用的还是使用webpack配置进行打包构建

②.webpack配置

webpack有四大核心概念:

入口(entry): 程序的入口js
输出(output): 打包后存放的位置
loader: 用于对模块的源代码进行转换
插件(plugins): 插件目的在于解决 loader无法实现的其他事

配置webpack.config.js
运行npx webpack会自动加载当前目录内的webpack.config.js文件，或者可以在package.json文件的script脚本内配置"build":"webpack":然后使用npm run build即可打包
1. 按照指定文件打包的话需要配置webpack --config xxx.config.js

const path = require('path')

module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: 'bundle.js'
  },
  mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}

③.开发时自动编译工具

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

watch

在webpack指令后面加上--watch参数即可

主要的作用就是监视本地项目文件的变化, 发现有修改的代码会自动编译打包, 生成输出文件

配置package.json的scripts"watch": "webpack --watch"
运行npm run watch

以上是cli的方式设置watch的参数

还可以通过配置文件对watch的参数进行修改：

const path = require('path')

// webpack的配置文件遵循着CommonJS规范
module.exports = {
  entry: './src/main.js',
  output: {
    // path.resolve() : 解析当前相对路径的绝对路径
    // path: path.resolve('./dist/'),
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  mode: 'development',
  watch: true
}

运行npm run build

webpack-dev-server (推荐)

安装devServer：

devServer需要依赖webpack，必须在项目依赖中安装webpack

npm i webpack-dev-server webpack -D
index.html中修改 <script src="/bundle.js"></script>
运行：npx webpack-dev-server
运行：npx webpack-dev-server --hot --open --port 8090
配置package.json的scripts："dev": "webpack-dev-server --hot --open --port 8090"
运行npm run dev

devServer会在内存中生成一个打包好的bundle.js，专供开发时使用，打包效率高，修改代码后会自动重新打包以及刷新浏览器，用户体验非常好

以上是cli的方式设置devServer的参数

还可以通过配置文件对devServer的参数进行修改：

修改webpack.config.js

const path = require('path')

module.exports = {
  // 入口文件配置
  entry: './src/index.js',
  // 出口文件配置项
  output: {
    // 输出的路径，webpack2起就规定必须是绝对路径
    path: path.join(__dirname, 'dist'),
    // 输出文件名字
    filename: 'bundle.js'
  },
  devServer: {
    port: 8090,
    open: true,
    hot: true
  },
  mode: 'development'
}

修改package.json的scripts: "dev": "webpack-dev-server"
运行npm run dev

html插件

安装html-webpack-plugin插件npm i html-webpack-plugin -D
在webpack.config.js中的plugins节点下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'template.html'//根据模板生产，可以不用
    })
]

devServer时根据模板在express项目根目录下生成html文件(类似于devServer生成内存中的bundle.js)
devServer时自动引入bundle.js
打包时会自动生成index.html，或者根据模板生成html

小结

只有在开发时才需要使用自动编译工具, 例如: webpack-dev-server
项目上线时都会直接使用webpack进行打包构建, 不需要使用这些自动编译工具
自动编译工具只是为了提高开发体验

3.webpack的loader处理非js文件

①.webpack处理css文件

配置webpack.config.js

  module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 用正则匹配当前访问的文件的后缀名是  .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // webpack底层调用这些包的顺序是从右到左，从下到上
      }
    ]
  }

loader的释义:

css-loader: 解析css文件
style-loader: 将解析出来的结果放到html中, 使其生效

②.webpack处理less文件

安装npm i less less-loader -D
rules中加入{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

③.webpack处理sass文件

安装npm i sass-loader node-sass -D
rules中加入{ test: /\.s[ac]ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

④.处理图片文件

安装npm i file-loader url-loader -D
url-loader封装了file-loader, 所以使用url-loader时需要安装file-loader
在rules规则中加入以下规则：

{
    test: /\.(png|jpg|gif)/,
    use: [{
        loader: 'url-loader',
        options: {
            // limit表示如果图片大于5KB，就以路径形式展示，小于的话就用base64格式展示
            limit: 5 * 1024,
            // 打包输出目录
            outputPath: 'images',
            // 打包输出图片名称
            name: '[name]-[hash:4].[ext]'
        }
    }]
}

⑤.处理字体图标文件

npm i bootstarp@3 -S安装bootstrap3.x 版本的
建立index.html给html-webpack-plugin添加一个模板,指定这个index.html的文件位置
在index.js中引入bootstrap的css样式文件import "bootstrap/dist/css/bootstrap.css"
在index.html中使用bootstrap的字体图标，报错
安装npm i file-loader url-loader -D
在rules中加入以下规则 {test:/\.(woff|woff2|eot|svg|ttf)$/, use:'url-loader'}

4.webpack的babel转换js语法

①.将ES6的语法转为ES5的语法

npm i babel-loader @babel/core @babel/preset-env webpack -D

{
    test:/\.js$/,
    use:{
        loader:"babel-loader",
        options:{
            presets:["@babel/env"],  
        }
    }
}

②.支持更高级的ES语法, 需要继续安装插件:

比如使用类的静态属性：

class Peopel{
    //这个语法babel默认不支持，如果需要支持还要下载插件，报错提示
    static name = "李四" 
    constructor(name,age){
        this.age = age
        this.name = name
    }
}
p = new Peopel("战三",12)
console.log(p.name)

1.npm i @babel/plugin-proposal-class-properties -D

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/env'],
      plugins: ['@babel/plugin-proposal-class-properties']
    }
  },
  exclude: /node_modules/
}

使用generator函数

function *fn(){
    yield 1
    yield 2
    return 3
}
var newFn = fn()
console.log( newFn.next() )
console.log( newFn.next() )
console.log( newFn.next() )
console.log( newFn.next() )
// 打包后运行报错，新版本游览器原本支持使用generator函数，但是使用webpack就会报错

regeneratorRuntime is not defined

如果需要使用generator，无法直接使用babel进行转换，因为会将generator转换为一个regeneratorRuntime，然后使用mark和wrap来实现generator但由于babel并没有内置regeneratorRuntime，所以无法直接使用

需要安装插件:npm i @babel/plugin-transform-runtime -D 同时还需安装运行时依赖:npm install --save @babel/runtime 配置文件的时候不要忘了exclude: /node_modules/，否则报错 babel插件链接

"plugins": [
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-transform-runtime"
 ]

官方更建议的做法是在项目根目录下新建一个.babelrc的babel配置文件，在.babelrc中添加插件,它是json格式的文件:

{
 "presets": [
 "@babel/env"
 ],
 "plugins": [
 "@babel/plugin-proposal-class-properties",
 "@babel/plugin-transform-runtime"
 ]
}

使用ES6/7中对象原型提供的新方法 babel默认情况无法转换，即使用了transform-runtime的插件也不支持转换原型上的方法

//js是一门动态语言，在代码执行时可以随时为对象添加属性和方法，babel在看到对象调用方法的时候默认不会进行转换，include这样的新方法默认不会转换
var str = "gao"
console.log( str.includes('a') )

需要使用另一个模块:npm i @babel/polyfill -S
该模块需要在使用新方法的地方直接引入:import '@babel/polyfill'

source map的使用

devtool

此选项控制是否生成，以及如何生成 source map。使用source map得启用浏览器的source map设置

使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map。

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

可以直接使用 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 来替代使用 devtool 选项，它有更多的选项，但是切勿同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。因为devtool 选项在内部添加过这些插件，所以会应用两次插件。

devtool	构建速度	重新构建速度	生产环境	品质(quality)
(none)	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）
eval-source-map	--	+	no	原始源代码
cheap-source-map	+	o	no	转换过的代码（仅限行）
cheap-module-source-map	o	-	no	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	--	--	yes	原始源代码
inline-source-map	--	--	no	原始源代码
hidden-source-map	--	--	yes	原始源代码
nosources-source-map	--	--	yes	无源代码内容

这么多模式用哪个好？

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

none(不使用source map)

原因如下：

使用 cheap 模式可以大幅提高 soure map 生成的效率。大部分情况我们调试并不关心列信息，而且就算 source map 没有列，有些浏览器引擎（例如 v8）也会给出列信息。
使用 module 可支持 babel 这种预编译工具，映射转换前的代码。
使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的重新构建速度都很快。
使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

这么多模式用哪个好？

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

none(不使用source map)

原因如下：

使用 cheap 模式可以大幅提高 soure map 生成的效率。大部分情况我们调试并不关心列信息，而且就算 source map 没有列，有些浏览器引擎（例如 v8）也会给出列信息。
使用 module 可支持 babel 这种预编译工具，映射转换前的代码。
使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的重新构建速度都很快。
使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

插件

①.clean-webpack-plugin插件

该插件在npm run build时自动清除dist目录后重新生成，防止缓存等等

安装插件

npm i clean-webpack-plugin -D

引入插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

使用插件, 在plugins中直接创建对象即可

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],

②.copy-webpack-plugin插件

安装插件

npm i copy-webpack-plugin -D

引入插件

const CopyWebpackPlugin = require('copy-webpack-plugin')

使用插件, 在plugins中插件对象并配置源和目标

from: 源, 从哪里拷贝, 可以是相对路径或绝对路径, 推荐绝对路径

to: 目标, 拷贝到哪里去, 相对于output的路径, 同样可以相对路径或绝对路径, 但更推荐相对路径(直接算相对dist目录即可)

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, 'assets'),
        to: 'assets'
      }
    ])
  ],

③.BannerPlugin插件

这是一个webpack的内置插件，用于给打包的JS文件加上版权注释信息

引入webpack
```
const webpack = require('webpack')
```
创建插件对象

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
        {
            from: path.join(__dirname, 'assets'),
            to: 'assets'
        }
    ]),
    new webpack.BannerPlugin('GaoChao')
],

Webpack基础

1、webpack的安装

2、webpack的使用

①.webpack-cli

②.webpack配置

③.开发时自动编译工具

watch

webpack-dev-server (推荐)

html插件

小结

3.webpack的loader处理非js文件

①.webpack处理css文件

②.webpack处理less文件

③.webpack处理sass文件

④.处理图片文件

⑤.处理字体图标文件

4.webpack的babel转换js语法

①.将ES6的语法转为ES5的语法

source map的使用

devtool

这么多模式用哪个好？

插件

①.clean-webpack-plugin插件

②.copy-webpack-plugin插件

③.BannerPlugin插件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读