webpack 入门笔记

什么是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'
  }])
]
复制代码