[学习笔记]webpack 入门笔记

159 阅读3分钟

什么是Webpack

webpack 可以看做是模块打包机, 主要可以做到如下内容

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
  • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
  • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
  • 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。

目的就是工程化,解放生产力

快速上手

安装

npm install webpack webpack-cli -D

基本配置文件

const path=require('path');
module.exports={
    mode: ''develepment, // 配置打包环境
    entry: './src/index.js', // 配置入口
    output: { // 配置出口
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {}, // 配置模块 loaders
    plugins: [], // 配置插件
    devServer: {}, // 配置开发服务器}

mode

分为两个环境,开发环境(develepment)、生产环境(production)

production 相比 develepment, 会在打包是做很多优化。工作中除上线外都用 develepment

entry output

先用最简单的举例,单入口单出口

const path = require('path'); //node系统模块
module.exports={
    //入口配置
    entry: './src/index.js',
    //出口配置
    output:{
        path:path.resolve(__dirname,'dist'), //path必须是绝对路径
        filename:'bundle.js'
    }
};

entry 入口可以使用相对路径,但是output.path 必须使用绝对路径

entry 可以是 字符串'./src/index.js'、数组 ['./src/index.js']、对象 {a: './src/index.js'}

如果想出口文件名中包含入口文件名的变量,可以使用 [name].js

多入口文件

	const path = require('path');
	module.exports = {
		entry:['./src/index.js','./src/index2.js'],  //按照顺一起打包 bundle.js
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'bundle.js'
		}
	};

多入口多出口配置

	const path = require('path');
	module.exports = {
		entry:{
			index:'./src/index.js',
			index2:'./src/index2.js'
		},
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'[name].bundle.js'
		}
	};

webpack-dev-server

安装

npm i webpack-dev-server –D

配置 webpack.config.js

devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'localhost',        compress:true,
       port:8080
}
  • contentBase 配置开发服务运行时的文件根目录
  • host:开发服务器监听的主机地址
  • compress 开发服务器是否启动gzip等压缩
  • port:开发服务器监听的端口

html 模板

安装 html-webpack-plugin 配置模版

npm i html-webpack-plugin -D

引入

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

使用

  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 模版地址
    })
  ],

loaders

loader 有三种写法

// 第一种
use:['xxx-loader','xxx-loader']
// 第二种
loader:['xxx-loader','xxx-loader']
// 第三种
use:[{loader:'style-loader'},{loader:'css-loader'}]

处理css文件

安装使用 style-loader css-loader

npm i style-loader css-loader -D

配置

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

处理js

使用 babel 来编译 js

举例编辑 react 项目

安装使用 babel-loader @babel/core @babel/preset-env @babel/preset-react

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

配置

  module: {
    rules: [
      {test: /\.js$/, use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        }
      }}
    ],
  },

处理图片

安装使用 file-loader url-loader

cnpm i file-loader url-loader -D

配置

{
  test:/\.(png|jpg|gif)$/,
  use:[{
    loader:'url-loader',
    options:{
      limit:50,
      outputPath:'images'
    }
  }]
}

静态资源输出

安装使用 copy-webpack-plugin

npm i copy-webpack-plugin -D

引入

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

使用

plugins:[
  new CopyWebpackPlugin([{
    from:path.resolve(__dirname, 'src/assets'),
    to:'./public'
  }])
]