webpack

webpack

webpack 查看不了版本，只有在安装了局部后在 局部终端下查看 webpack -v 通过在sripts中添加 “show”: “webpack -v” npm run show
webpack 不能作为命令

五大核心

entry,output,module,pluges,mode

生产环境,开发环境

mode=development 开发模式:
mode=production 生产模式: 比开发模式多一个压缩代码

webpack自带功能

两种模式能将ES6模块化编译成浏览器能识别的模块
webpack只能处理js/json文件,不能处理css等文件

webpack处理样式资源–loader

webpack.config.js文件必须和src文件同一级,webpack.config.js文件是webpack的指示文件

webpack.config.js文件中用的是node中commonjs的模块化
path用到了node中的path
module.exports中的配置必须把内容写出来不然会报错
resolve是将路径和dirname拼接,filename就是最后输出的文件的名称
module模块就是loader的配置文件loader是一个对象,里面的test是个正则表达式,查找文件类型,use中的是需要的loader模块,模块是由后往前加载,css-loader将css转化为commonjs模块放进js文件中,style-loader是创建style模块,将js文件转化为样式放进head中
要使用多个loader用user 单个loader用loader

//这个文件是一个指示,指示webpack对文件进行什么优化
//所有构建模块都是基于nodejs平台的模块化commonjs
//需要路径处理  用到node的path
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        //__dirname是该文件的绝对位置  及  所在的文件夹位置
        //resolve函数是对dirname 和 dist进行拼接
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js' // 这里修改了输出的文件名，我们运行package.json中的脚本，就会发现dist目录下生成的文件变成了index.js
    },
    // module是loader的编辑处
    module: {
        //rules 是详细的loader配置
        rules: [
            //loader是一个对象
            {
                //匹配那些文件  正则表达式
                test: /\.css$/, //匹配以css结尾的文件模块
                //use为使用哪些loader进行处理,use中的loader加载顺序是从下到上,从右到左
                use: [
                    //style-loader创建style标签插入index文件的head里  将js模块转化为css插入style
                    'style-loader',
                    //css-loader将css文件转化为commonjs模块加载到index.js中
                    'css-loader'
                ]
            }
        ]
    },
    mode: 'development' //开发模式代码没有压缩
};
};

webpack处理html文件 plugins插件应用

插件与loader的区别为插件需要 下载(html-webpack-plugin) 引入
不需要再html文件中引入index.js和 css文件 因为html-webpack-plugin会自动引入打包文件

const path = require('path');
//插件必须引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { template } = require('lodash');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js' // 这里修改了输出的文件名，我们运行package.json中的脚本，就会发现dist目录下生成的文件变成了index.js
    },
    mode: 'development', // 模式配置 （production / development ）
    plugins: [
        //plugins配置
        //html-webpack-plugin
        //功能:创建一个空的html，自动引入打包输出的所有资源(css/js)不需要在原html文件中引入js
        //复制./src/index.html文件并自动引入打包输出的所有资源
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

这样引入插件生成的html是没有内容的

打包图片资源 --loader

处理css中引用的图片文件

url-loader来处理图片资源，但是因为url-loader依赖了file-loader所以还要下载file-loader

 {
            //图片加载
            test: /\.(jpg|png|gif|jpeg)$/,
            loader: 'url-loader',
            //设置图片大小 并关闭url-loader的es6module
            options: {
                //图片小于8k就会被base64处理
                // 优点：减少请求数量（减少服务器压力）
                limit: 8 * 1024,
                esModule: false //关闭url-loader的es6module方便后面html中的图片打包处理
            }
        }

处理html中直接引用的文件

通过 html-loader处理
html-loader的功能：引入img从而能够被url-loader处理
因为url-loader是通过es6模块化解析，而html-loader引入图片是commonjs所以解析时会出问题:[object module],解决方法是：关闭url-loader的es6module，esModule: false 在新版webpack5中，html-loader也需要esModule: false

{
            //图片加载
            test: /\.(jpg|png|gif|jpeg)$/,
            loader: 'url-loader',
            //设置图片大小 并关闭url-loader的es6module
            options: {
                //图片小于8k就会被base64处理
                // 优点：减少请求数量（减少服务器压力）
                limit: 8 * 1024,
                esModule: false //关闭url-loader的es6module方便后面html中的图片打包处理
            }
        }, {
            //html文件中的图片的打包处理
            test: /\.html$/,
            loader: 'html-loader', //处理html中的img图片（负责引入img方便url-loader处理）
            options: {
                esModule: false
            }

打包其他资源

都用 file-loader来打包
例如：打包字体，在阿里巴巴下载了字体后，将css及与css相关的文件都复制到src中

在index.js中import iconfont.css文件

在webpack.config.js文件中rules中写入，exclude必须将之前的资源全部排除在外

 {
            //除了这些文件就用file-loader处理
            exclude: /\.(css|js|html|jpg|jpeg|gif)$/,
            loader: 'file-loader'
        }

开发服务器–devServer (自动打包，自动编译，自动打开浏览器)

只在内存中打包，运行关环境后，就会消除内存
·注意webpack-cli最新版本跟 webpack-dev-server不是很适应，不能开启devserver服务 只能下载webpack-cli @3.0等低版本使用·
启动命令：npx webpack-dev-sever

开发环境的搭键

注意:当在src文件中分类了各种文件夹时,连接需要改变,注意如果使用了字体图标那么在iconfont.css中的对其他文件的使用也需要修改路径

输出指令: npx webpack (打包) 或者 npx webpack-dev-server (指在内存中打包)

设置输出结果的文件夹:

在options中添加outputPath 如果有了use: 就不可以添加 css文件不需要添加文件夹 因为js是在js文件中的

将css文件单独提取出来–插件mini-css-extract-plugin

1.下载插件mini-css-extract-plugin
2.将插件引入webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

3.在module中的use中将style.loader换为 MiniCssExtractPlugin.loader

4.在plugin中new MiniCssExtractPlugin（）

4.1 如果想要和css文件夹一样用filename
//重命名css文件
filename: ‘css/index.css’

这样添加的标签是用link标签引入，如果不用这个插件就是style标签引入会使js文件过大，解析速度更慢

CSS兼容性处理–postcss-loader

prostcss-loader会将src的css文件进行处理满足浏览器的要求，前端就不用考虑兼容性问题
1.下载postcss-loader postcss-pre-env
2.在use中加入postcss-loader,并设置参数

 use: [
                //将style。loader换成MiniCssExtractPlugin,作用：提取js文件中的css为单独文件
                MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                   options: {
        postcssOptions: {
            //或者将插件引入写在单独的配置js中
            //config: './config/postcss.config.js',
            plugins: () => [
                require('postcss-preset-env')()
            ]
        }
    }
                }
            ]

3.在下载了postcss的package.json中设置browserslist中配置样式兼容性
》development中表示兼容最新的浏览器】
》production中表示兼容98%的活的非op_mini all的浏览器

browserlist默认是生产环境 开发环境需要设置

 "browserlist": {
        "development": [
            "last 1 chrome version",
            "last 1 IE version",
            "last 1 safari version"
        ],
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }

4.将nodejs开发模式设置为开发模式
当设置了开发环境 开发模式才会生效

process.env.NODE_ENV = 'development';

压缩css

通过optimize-css-assets-webpack-plugin进行压缩

1.下载 optimize-css-assets-webpack-plugin
2.插件都需要引入const optimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’);
3.在插件中应用

效果：