初步了解webpack

webpack

1,创建项目文件夹

2,初始化

npm init -y

3,下载依赖包

npm i webpack webpack-cli -D

4,打包

默认entry入口 src/index.js

默认output出口 dist/main.js

打包模式

在package.json文件scripts中配置：

“dev” ：“webpack --modle development”

“build”:webpack --modle production"

使用配置文件打包

1,新建一个webpack.config.js

2,配置入口entry(所需要打包的文件路径)

3,配置出口output

1,path指文件打包后存放的位置

2，path.resolve()方法将路径或路径片段的序列处理成绝对路径

3，__dirname表示当前文件所在的目录的绝对路径

4，filename是打包后文件的名称

单入口多文件

const path = require('path');
module.exports = {
    // 单入口多文件
    entry:['./public/index.js' , './public/index2.js'],
    output:{
        path:path.resolve(__dirname , 'dist'),
        filename:"bundle.js"
    }
}

配置webpack-dev-server

1,配置package.json文件

scripts中–>“start”:“webpack-dev-server --mode development”

2，配置webpack.config.js

devServer:{
        contentBase:'./build',//设置服务器访问的基本目录
        host:'localhost',//服务器的ip地址
        port:8080,//端口
        open:true//自动打开页面
    }

css处理

1，下载loader依赖包

npm i style-loader css-loader -D

2,配置webpack.config.js文件

module: {
    rules: [
        {
            test: /\.css$/,
            // 注意: style-loader必须写在css-loader之前
            use: ['style-loader' , 'css-loader']
        }
    ]
}

sass处理

1，下载loader依赖包

npm i sass-loader node-loader -D

2,配置webpack.config.js文件

module: {
    rules: [
        {
            test: /\.scss$/,
            // 注意: style-loader必须写在css-loader之前
            use: ['style-loader' , 'css-loader','sass-loader']
        }
    ]
}

less处理

1,下载loader依赖包

npm i less-loader less -D

2,配置webpack.config.js文件

module: {
    rules: [
        {
            test: /\.less$/,
            // 注意: style-loader必须写在css-loader之前
            use: ['style-loader' , 'css-loader','less-loader']
        }
    ]
}

使用postcss处理浏览器前缀

1,下载loader

npm i postcss-loader autoprefixer -D

2,配置webpack.config.js文件

module: {
    rules: [
        {
            test: /\.css$/,
            // 注意: style-loader必须写在css-loader之前
            use: ['style-loader' , 'css-loader','less-loader',{
                loader:'postcss-loader',
                // 选项设置
                options:{
                    plugins:[
                        require("autoprefixer")({
                            overrideBrowserslist:[
                                'ie >= 8',//ie版本大于等于ie8
                                'Firedox >= 20',//火狐浏览器大于20版本
                                'Safari >= 5',//Safari大于5版本
                                'Android >= 4',//版本大于Android4
                                'Ios >= 6',//版本大于Ios6
                                'last 4 version'//浏览器最新的4个版本
                            ]
                        })
                    ]
                }
            }]
        }
    ]
}

或者在package.json文件中配置

"browserslist": [
    "ie >= 8",
    "Firedox >= 20",
    "Safari >= 5",
    "Android >= 4",
    "Ios >= 6",
    "last 4 version"
  ]

图片处理

1,下载loader

npm i file-loader -D

2,配置webpack.config.js文件

{
    test: /\.(png|jpg|gif|jpeg)$/,
        use:[{
            loader:'file-loader',
            options:{
                // 打包后的图片名
                // name:'[path]zuomian.png',
                // context:'./public'

                // 打包后的图片名
                name:'[hash]zuomian.png',
                // 打包后生成一个img文件夹存储图片
                outputPath:'./img'
            }
        }]
}

3,配置options

name:为你的文件配置自定义文件名模板(默认值[hash].[ext])

context:配置自定义文件的上下文，默认为webpack.config.js

publicPath:为你的文件配置自定义public发布目录

outputPath：为你的文件配置自定义output输出目录

[ext]:资源 的扩展名

[name]:资源的基本名称

[path]:资源相对context的位置

[hash]:内容的哈希值

字体处理

1,下载loader

npm i file-loader -D

2,配置webpack.config.js文件

{
    test:/\.css$/,
    use:['style-loader','css-loader']
},
{
    test:/\.(eot|svg|ttf|woff|woff2)$/,
    use:[{
        loader:'file-loader',
        options:{
        // 打包后字体文件存储的目录文件夹
        outputPath:'./fonts'
        }
    }]
}

js第三方库处理

1,本地导入

配置webpack.config.js文件

//1，导入webpack模块
const webpack = require('webpack');

//2，
module.exports = {
    // js库处理 处理本地导入的第三方js库
    resolve:{
        alias:{
            // 导入库所在的路径
            jQuery:path.resolve(__dirname,'public/js/jquery-3.4.1.min.js')
        }
    },
    plugins:[
        new webpack.ProvidePlugin({
            // $为键jQuery为值 $可以作为变量随便取名
            $:"jQuery"
        })
    ]
}

2,npm导入

1,控制台输入npm i jquery -D下载jquery第三方库

2，在需要打包的js文件中导入 import $ from 'jquery’

使用babel编译es6

1，下载依赖项

1，bable-loader：负责es6语法转换

2，babel-core:babel核心包

3，babel-preset-env:告诉babel使用哪种转码规则进行文件处理

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

2,配置webpack.config.js文件

exclude表示不在指定目录查找相关文件

{
    test:/\.js$/,
    exclude:/node_modules/,
    use:'babel-loader'
}

3,新建.babelrc文件配置转换规则

{
    // 转换规则
    "presets": ["@babel/preset-env"]
}

4,转换规则另一种配置方式

直接在webpack.config.js配置文件中设置

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

生成HTML

1,下载插件

npm i html-webpack-plugin -D

2,配置webpack.config.js文件

// 1,导入生成html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 2,配置插件
plugins:[
    new HtmlWebpackPlugin({
        template:'./public/index.html',//模板文件路径
        filename:'index.html',//生成文件的名称
        minify:{
            minimize:true,//是否打包为最小值
            removeAttributeQuotes:true,//去除引号
            removeComments:true,//去除注释
            collapseWhitespace:true,//去除空格
            minifyCSS:true,//压缩html内的样式
            minifyJS:true,//压缩html内的js
            removeEmptyElements:true,//清空内容为空的元素
        },
        hash:true//引入产出资源的时候加上哈希避免缓存
    })
]

提取分离CSS

1，ExtractTextPlugin插件

1-1,下载插件

npm install --save-dev extract-text-webpack-plugin@next

1-2,配置webpack.config.js文件

// 1,引入抽取分离css需要的插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 2,Rules规则配置
module: {
    rules: [
        {
            test:/\.css$/,
            use:ExtractTextWebpackPlugin.extract({
                // fallback:编译后用什么loader来提取CSS文件
                fallback:"style-loader",
                // 编译loader
                use:"css-loader"
            })
        },
    ]
}

// 3,plugins插件配置
plugins:[
    new ExtractTextWebpackPlugin("./css/index.css")
]

2,新版mini-css-extract-plugin插件

2-1,下载插件

npm install --save-dev mini-css-extract-plugin

2-2,配置webpack.config.js文件

// 1,引入抽取分离css需要的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 2,Rules规则配置
module: {
    rules: [
        {
            test:/\.css$/,
            // MiniCssExtractPlugin.loader提取css文件 编译loader css-loader
            use:[MiniCssExtractPlugin.loader , 'css-loader']
        }
    ]
}

// 3,plugins插件配置
plugins:[
    new MiniCssExtractPlugin({
        filename:'./css/index.css'
    })
]

压缩css和优化css结构

1，下载插件

npm i optimize-css-assets-webpack-plugin -D

2，配置webpack.config.js文件

// 1，引入压缩css文件需要的插件
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');
// 2,配置plugins
plugins:[
    // 压缩css文件插件的配置
    new OptimizeCssPlugin({
        // 正则表达式，用于匹配需要压缩或优化的资源名，默认值是/\.css$/g
        assetNameRegExp:/\.css$/g,
        // 用于压缩和优化css的处理器，默认是cssnano
        cssProcessor:require('cssnano'),
        // 传递给cssProcessor的插件选项，默认{}
        cssProcessorPluginOptions:{
            // discardComments去除注释
            preset:['default',{discardComments:{removeAll:true}}]
        },
        // 表示插件能够在console中打印信息，默认是true
        canPrint:true
    })
]

拷贝静态文件

1，下载插件

npm i copy-webpack-plugin -D

2，配置webpack.config.js文件

// 1.引入插件
const CopyPlugin = require('copy-webpack-plugin');
//2.配置插件
module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'source', to: 'dest' },
        { from: 'other', to: 'public' },
      ],
    }),
  ],
};

清除文件

1，下载插件

npm install --save-dev clean-webpack-plugin

2，配置webpack.config.js文件

// 1,引入clean清除文件插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//2,配置插件
module.exports = {
  plugins: [
    //配置清除插件
     new CleanWebpackPlugin({
         cleanOnceBeforeBuildPatterns: ['*.js','./dist']
     })
  ]
};

处理HTML内嵌图片

1，下载loader

npm i html-loader -D

2,配置webpack.config.js文件

module.exports = {
    module: {
        rules: [
            {
                test:/\.(html)$/,
                    use:{
                        loader:'html-loader',
                            options:{
                                attributes:{
                                    list:[
                                        {
                                            tag: 'img',
                                            attribute: 'src',
                                            type: 'src',
                                        },
                                        {
                                            tag: 'img',
                                            attribute: 'data-src',
                                            type: 'src',
                                        }
                                    ]
                                }
                            }
                    }
            }
        ]
    }
}

使用sourcemap调试

1，js调试

module.exports = {
    // 在配置文件webpack.config.js中添加
    // 显示源码 开发环境使用
    devtool:"cheap-module-eval-source-map",
    // 生产环境使用
    // devtool:'source-map',
}

2，css调试

// 在配置文件webpack.config.js中添加
module.exports = {
    module: {
        rules: [
            {
                test:/\.css$/,
                // MiniCssExtractPlugin.loader提取css文件 编译loader css-loader
                use:['style-loader' , {
                    loader:'css-loader',
                    options:{
                        sourceMap:true
                    }
                }]
            }
     	]
    }
}

模块热替换

1，配置webpack.config.js文件

module.exports = {
    // 1，修改devServer
    devServer: {
        contentBase: './dist',//设置服务器访问的基本目录
        host: 'localhost',//服务器的ip地址
        port: 8080,//端口
        open: true,//自动打开页面
        hot:true,
        // 热更新不会刷新页面
        hotOnly:true
    }，
    // 2，配置插件plugins
    plugins:[
    	// 热替换 可写可不写
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}

在js文件中手动添加热更新配置

// 更新js文件 手动更新模块热替换
if(module.hot){
    module.hot.accept();
}

区分生产环境和开发环境

将webpack.config.js拆分为三个文件

分别为公共配置webpack-dev.conf.js，开发webpack-dev.conf.js、生产webpack-prod.conf.js配置

1，下载webpack-merge合并依赖包

npm i webpack-merge -D

2，配置package.json文件

根据文件对应位置进行填写

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --config ./config/webpack-dev.conf.js",
    "build": "webpack --mode production --config ./config/webpack-prod.conf.js",
    "start": "webpack-dev-server --mode development --config ./config/webpack-dev.conf.js"
  }

3，配置区分的三个不同文件

const merge = require('webpack-merge');
// 引入公共文件
const common = require('./webpack.common.conf.js');

module.exports = merge(common , {})

例：

const webpack = require('webpack');
// 引入webpack-merge合并文件依赖包
const merge = require('webpack-merge');
// 引入公共文件
const common = require('./webpack.common.conf.js');

module.exports = merge(common , {
    // 显示源码 开发环境使用
    devtool:"cheap-module-eval-source-map",
    devServer: {
        contentBase: './dist',//设置服务器访问的基本目录
        host: 'localhost',//服务器的ip地址
        port: 8089,//端口
        open: true,//自动打开页面
        hot:true,
        // 热更新不会刷新页面
        hotOnly:true
    },
    plugins:[
        // 热替换 可写可不写
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]
})

优化打包速度

1，优化resolve.extensions配置

减少文件搜索范围

resolve:{
    extensions:['js']
}

2，优化resolve.modules配置

resolve.modules用于webpack去哪些目录下寻找第三方模块

function resolve(dir) {
    return path.join(__dirname, dir)
}

resolve:{
    modules:[
        resolve('public'),
        resolve('node_modules')
    ]
}

3，优化resolve.alias配置

resolve.alias配置项通过别名来把原导入路径映射成一个新的导入路径

resolve:{
    alias:{
        jQuery:path.resolve(__dirname,'public/js/jquery-3.4.1.min.js')
}

4，缩小文件匹配范围

include:需要处理的文件的位置

exclude：排除掉不需要处理的文件的位置

{
    test:/\.js$/,
        // 优化打包速度
        include:[resolve('public')],
        exclude:/node_modules/,
        use:{
            // ?cacheDirectory=tru 优化打包速度
            loader:'babel-loader?cacheDirectory=true',
            options:{
                 presets:["@babel/preset-env"]
            }
       }
}

5，设置noParse

忽略大型的library库可以提高构建性能，比如jquery、elementUI

module: {
    // 优化打包速度 忽略文件
    noParse:/node_modules\/(jquery\/dist\/\.js)/,
}

6，给babel-loader设置缓存

{
    test:/\.js$/,
    // 优化打包速度
    include:[resolve('public')],
    exclude:/node_modules/,
    use:{
        // ?cacheDirectory=tru 优化打包速度
        loader:'babel-loader?cacheDirectory=true',
        options:{
            presets:["@babel/preset-env"]
        }
   }
}

7，使用happypack

1,安装

npm i happypack -D

2,配置webpack.config.js文件

• 1，引入happypack

const HappyPack = require('happypack');

• Rules设置

{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'happypack/loader?id=happyBabel'
}

• plugins设置

new HappyPack({
    // 用id来标识 happypack处理哪里来的文件
    id:"HappyPack",
    // 如何处理 用法和loader的配置一样
    loaders:[{
        loader:'babel-loader?cacheDirectory=true'
    }
})