阅读 33

webpack学习笔记整理

1.预备知识

1.1webpack是什么?

webpack用于编译javascript模板,也就是模块打包工具。 打包工具帮你获得一些准备用于部署的js和css等,把他们转化为适合浏览器的可用得格式。 通过压缩、分享、懒加载等,提升性能,调高开发效率。

1.2webpack不是什么?

它不是任务执行的工具,意思就是说,任务执行就是自动化处理一些常见的开发任务。 例如:代码检测、构建、测试、都是一些重复性比较强的事情。 任务执行工具:例如,grunt,gulp.

1.3为什么要学习webpack?

早期,在浏览器中运行js有两种方式: 1、直接引用jsj脚本程序,有多少个js,就引用多少个js文件 2、直接一个大的js文件,所有的js代码,但是文件大小体积就不可控。 后来: 有出现了使用立即执行函数表达式(IIFE)的方式,这种方式主要是用来解决大型项目的作用的问题。 这种做法,有些工具gulp、grunt、这些工具,就算是任务执行器。 他们更多的是项目文件的拼接。 再后来node出现了,然后就出现了js的模块化开发。 主要是意图require机制,让你在当前文件中加载和使用某个模块。 webpack最出色的功能 ,它还可以引入任何类型的文件,包括非js文件,可以用来引入应用程序中所有的非js的内容,例如:图片、css等,webpack把这些视为模块,这样每个模块都可以通过互相的引用(依赖)来表明它们之间的关系,就可以避免打包未使用的模块(资源) 这就是webpack存在的原因和为什么学习webpack.

2.webpack起步

2.1安装webpack:

npm isntall webpack webpack-cli -save-dev 简写:这里安装4.x版本 npm i webpack webpack-cli -D 说明:i指install -D指-save-dev webpack-cli是为了可以在命令行中执行打包。

webpack4.x • 默认把src中的index.js作为入口起点, • 默认情况下,生成的文件在dist/main.js中 • 默认情况下,打包命令是webapck 所有当你想修改默认的打包方式的时候,可以单独配置webpack.config.js文件。 其中主要包含以下部分: (1)引入一些模块: const path=require('path') (2)好多其他的部分: module.exports={ 入口 出口 模块 解析 优化 插件

2.2 webpack.config.js实例:

const path=require('path')

module.exports={
  entry:'./src/index.js'
  ouput:{
    filename:'xxx.js',
    path:path.resolve(__dirname,'dist')
  }
}
复制代码

说明:

  • __dirname获取当前的绝对路径
  • dist表示打包后存储的位置,如果存在此文件则存储,如果不存在则新建一个文件夹。
  • 可能你想要了解在代码最上面导入的 path 模块是什么,它是一个 Node.js 核心模块,用于操作文件路径。

2.3 自定义webpack的打包命令:

在package.json文件中的"script"对象中写入:

"script":
{
  "build":"webpack"//这样以后就可以使用npm run build来打包了
}
复制代码

3.webpack资源管理loader

全部loader查询:www.webpackjs.com/loaders/

3.1对css进行资源管理:

(1)安装:
npm i style-loader css-loader

(2)在webpack.config.js中配置规则:
const path=require('path')

module.exports={
  entry:'./src/index.js'
  ouput:{
    filename:'xxx.js',
    path:path.resolve(__dirname,'dist')
  },
  module:{
    rules:[{
      test:/\.css$/,
      use:['style-loader','css-loader']
    }]
  }
}
(3)然后在index.js文件中引入css
import './style.css'
console.log("webpage资源管理")
复制代码

3.2对图片进行资源管理

(1)安装:
npm i file-loader -D

(2)在webpack.config.js中配置规则:
module:{
    rules:[{
      test:/\.css$/,
      use:['style-loader','css-loader']
    },{
      test:/\.(png|jpg|gif)$/,
      use:['file-loader']
    }]
  }
(3)然后在index.js文件中引入图片
import './style.css'
import xx_img from './demo.png'
console.log("webpage资源管理")
复制代码

4.webpack插件(plugins)

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;
复制代码

5.模式mode

通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化

5.1 用法:只在配置中提供 mode 选项

module.exports = {
  mode: 'production'
};
复制代码

或者从 CLI 参数中传递: webpack --mode=production

文章分类
前端
文章标签