webpack配置--基础篇

webpack是一个模块打包工具,可以递归构建一个js模块的依赖关系,将模块最终打包成一个或多个文件.

安装

yarn add webpack webpack-cli
复制代码

零配置

webpack能够进行零配置,只是此时打包功能比较弱.执行:

npx webpack
复制代码

进行打包. 执行npx webpack默认查找node_modules---bin文件夹--webpack.cmd--执行../webpack/bin/webpack.js

手动配置

简单配置

let path = require('path');
module.exports = {
    mode: 'development', //模式:打包后的文件是否可见production/development
    entry: './src/index.js', // 入口,能够是相对路径
    output: { // 出口
        filename: 'bundle.[hash:8].js', // 打包后的文件名:+哈希(打包生成新的文件), :8指定哈希长度
        path: path.join(__dirname, 'build'), // 打包后的文件路径:必须是绝对路径
    }
};

复制代码

默认配置文件名为webapck.config.js

webpack-cli文件夹下的config-yarg.js文件指定,配置文件名为webpack.config.js 或 webpackfile.js

修改配置文件名

• 方法一:

npx webpack --config webpack.config.name.js
复制代码

• 方法二: 在package.json文件中配置脚本进行打包, 同时修改配置文件名

"scripts": {
    "build": "webpack --config webpack.config.my.js"
 }
 // 执行 npm run webpack进行打包
复制代码

当仅在package.json文件中配置脚本进行打包, 在执行命令中修改配置文件名时:

"scripts": {
    "build": "webpack"
 }
// 执行npm run build --  --config webpack.config.my.js 打包,注意两个--进行传参
复制代码

html文件处理

启动静态服务-webpack-dev-server

webpack-dev-server:启动了一个使用express的Http服务器

// webpack.config.js文件
devServer: { // 开发服务器配置,实现静态服务
    port: 3000, // 服务器启动端口
    progress: true, // 打包进度条
    contentBase: path.join(__dirname, './build'), // 指定静态服务目录
    compress: true, // 是否压缩
}

// package.json文件
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}
 
// 执行npm run dev运行静态服务,经过http://localhost:3000在浏览器中访问
复制代码

html-webpack-plugin

html-webpack-plugin:将打包后的js文件放在html中,将结果放在build目录下

// webpack.config.js文件
let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html', // html模板文件
        filename: 'index.html', // 打包后的文件名称
        hash: true, // 添加哈希,避免缓存
        minify: { // 对html也进行压缩
            removeAttributeQuotes: true, // 删除双引号
            collapseWhitespace: true, // 折叠为一行
        }
    }),
],
复制代码

css文件处理

在html中不能直接引入css文件,由于上文提到html文件只是一个模板;因此,通常是在js文件中引入css文件,引入时须要经过loader进行解析

文件解析

module: {
    rules: [{ 
        // css文件
        test: /\.css$/,
        use: [{
            loader: 'style-loader',
            options: {
                insertAt: 'top', // 将css插入到自定义css的顶部   
            },
        }, 'css-loader'], 
    }, {
        // less文件
        test: /\.less$/,
        use: [style-loader, 'css-loader', 'less-loader'],  
    }],
}
复制代码

1. loader特色:功能专注,因此须要多个loader,loader顺序: 从右向左 从上往下执行
2. css-loader:处理css文件,如解析@import语法等
3. style-loader:以style标签形式将css代码插入在html页面的head标签,默认插入在head标签的底部;能够经过
4. less-loader: 将less转为css, yarn add less less-loader

css样式抽离:mini-css-extract-plugin

将全部的css放在head标签中,若是内容过多,致使页面加载阻塞,根据须要将css抽离到单独的文件中.

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
    new MiniCssExtractPlugin({
        filename: 'main.css', // 抽离出的css文件名
    }),
],
module: {
    rules: [{
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader, // 使用此loader将抽离后的css文件路径放在link标签中
            'css-loader',
            'postcss-loader',
        ], 
    }, {
        test: /\.less$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader',
            'less-loader'
        ],  
    }],
},

复制代码

css添加前缀: autoprefixer postcss-loader

// 新增postcss.config.js文件
module.exports = {
    plugins: [require('autoprefixer')],
};
// webpack.config.js
use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader', // 添加前缀
    'less-loader'
], 
复制代码

打包css文件: optimize-css-assets-webpack-plugin

使用此插件会对css进行压缩时,必须使用uglifyjs-webpack-plugin,不然js文件不会压缩

let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
optimization: { // 优化项
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true,
        }),
        new OptimizeCssAssetsPlugin()
    ]
}
复制代码

js文件处理

安装babel-loader、@babel/core、@babel/preset-env(es6语法)、@babel/plugin-proposal-class-properties@7.5.5(es7语法)、@babel/plugin-proposal-decorators(装饰器)、@babel/plugin-transform-runtime(修改内置方法或高级语法时使用,抽离部分公共方法)、@babel/runtime(不定)、@babel/polyfill(解析includes方法解析等es7语法) 、eslint(js语句校验规则)

module: {
    rules: [{
        test: /\.js$/,
        use: {
            enforce: 'pre', // 强制将此loader在前执行
            loader: 'eslint-loader',
        }, 
        exclude: /node_modules/,
    }, {
        test: /\.js$/,
        use: {
            loader: 'babel-loader', // 转化es6语法
            options: {
                presets: [
                    '@babel/preset-env',
                ],
                plugins: [ // 转化es7语法  注意顺序
                    ["@babel/plugin-proposal-decorators", { "legacy": true }],
                    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                    "@babel/plugin-transform-runtime"
                ],
            },
        }, 
        exclude: /node_modules/, // 默认会查找全部文件 
        include: path.resolve(__dirname, 'src'),
    }],
},
复制代码

eslint校验规则: 在https://eslint.org/demo中配置须要的eslint校验规则,而后下载配置好的文件,调价到根目录下,文件名为.eslintrc

将jquery注入到每一个模块中

经过espose-loader将$暴露到window上

import $ from 'expose-loader?$!jquery';
console.log(window.$);
或者
module: {
    rules: [{
        test: require.resolve('jquery'),
        use: 'expose-loader?$',
    }]
}

复制代码

给每一个模块提供$

let webpack = require('webpack');
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery', // 在每一个模块中注入$
    }),
],
复制代码

能够直接引入jquery cdn

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script> // 直接引入不打包
复制代码

此时,经过import $ from 'jquery'时,须要配置externals避免jquery被从新打包.

externals: {
    jquery: '$',
}
复制代码

图片使用和打包

js文件中使用图片

file-loader: 生成一张图片到build目录下并返回新的图片地址

import img from './640.jpeg'; // 引入图片,返回的结果是一个新的图片地址
let image = new Image();
image.src = img;
document.body.appendChild(image);
// webpack.config.js
module: {
    module: {
    rules: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
                loader: 'file-loader',
        }, 
    }]
}
复制代码

css文件中使用图片

background: url('./huaer.jpeg');
复制代码

能够直接引入,css-loader会对其转为require方式引入

html文件中使用图片

在html文件中直接引入图片时,经过html-withimg-loader对图片文件进行处理

<img src='./huaer.jpeg' /> 
// webpack.config.js
module: {
    rules: [{
        test: /\.html$/,
        use: 'html-withimg-loader',
    }]
}
复制代码

url-loader

经过url-loader能够将图片转为base64,减小http请求次数.缺点是文件变大

module: {
    rules: [{
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 1, // 当图片小于n k时 用base64转换
                outputPath: '/img/', // 输出路径,实现对静态文件分类
                publicPath: 'http://guazi.com', // 当经过cdn方式引入文件时,配置引入路径
            }
        }, 
    }]
}
复制代码