webpack打包工具的工作原理及基本使用

 

认识webpack以及基本安装:https://webpack.docschina.org/

webpack能干什么？

压缩文件：将文件压缩，节省上传的带宽，优化网速

优化代码：去除无用的代码、空格，还可以去除注释等，让浏览器解析代码速度更快

语法检查：处理代码在浏览器版本兼容性问题：例如老版本浏览器并不支持css3,es6的语法，

webpack的配置文件，默认文件名为webpack.config.js

以下是webpack文件的一些基本配置：

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    /*1、entry入口文件，告诉webpack从哪个文件开始打包，分析构建内部依赖图*/
    /*单个入口*/
    entry:'./src/index.js', 
    /*多个入口*/
    /*数组的方式，将多个入口文件打包到一个文件中,一共就生成一个bundle
    entru:['','']*/
    /*对象的方式，有几个入口就会生成几个chunk,并输出几个bundle,生成的文件名就是对象的下标名（one、two）.js,需要将output下的filename:'xxxx.js'改成filename:'[name].js'
    entry:{
        one:'./src/index.js',
        two:'./src/main.js'
    }*/
    /*特殊用途,以下会将'./src/index.js,./src/main.js'这俩个文件打包到一个bundle中，文件名对应下标名；并且将'./src/index.js'这个入口文件打包到单独的bundle文件中。
    entry:{
        onea:['./src/index.js','./src/main.js'],
        twob:'./src/index.js'
    }
    */
    /*2、output打包好的文件，指示webpack将打包好的货源存放的位置，以及文件名字*/
    output:{                
        filename:'build.js',
        path:resolve(__dirname,'build')
    },
    /*3、loader处理非javascript文件（css,img等），处理成webpack能够识别的货源，像是翻译的一个过程 */
    module:{
        rules:[]
    },
    /*4、plugins插件可用于执行范围更广的任务，包括打包优化和雅俗，需要哪个功能就导入那种插件 */
    plugins:[
        /*  使用html打包插件,先下载，接着require引入插件，然后使用
            new HtmlWebpackPlugin()
            默认会创建一个空的html文件，目的就是自动引入打包资源
        */
        /*如果想指定要打包的html文件*/
        new HtmlWebpackPlugin({
            template:'./src/index.html',    /*使用template属性指定html文件*/
            filename:'demo.html',           /*指定打包好的html文件名*/
            /*压缩html代码*/
            minify:{
                /*移除空格*/
                collapseWhitespace:true,
                /*移除注释*/
                removeComments:true
            }
        })
    ],
    /*mode模式：生产模式(production),开发模式(development)*/
    mode:'production'
}

　　打包多个html页面，并且指定导入对应的js文件

const {resolve} = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //使用特殊用法将html文件共同需要的js打包成一个js，单独需要的js则打包成单独的j    s文件然后通过plugins插件中的chunk属性指定导入对应的（ 压缩好的） js文件
    entry:{
        vendor:['./src/jquery.js','./src/common.js'],
        index:'./src/index.js',
        cart:'./src/cart.js'
    },
    output:{
        filename:"[name].js",
        path:resolve(__dirname,"build")
    },
    //当需要打包多个html文件时可以new多个对象
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            //通过chunks属性可指定导入对应的js文件
            chunks:['index','vendor']    
        }),
        new HtmlWebpackPlugin({
            template:'./src/cart.html',
            filename:'cart.html',
            chunks:['cart','vendor']
        })
    ],
    mode:'production'
}    

　　打包css文件

npm i css-loader style-loader -D
1、首先webpack默认只能处理js文件，所以我们解析css需要下载loader(解析资源)来处理css文件

2、在webpack.config.js配置文件中添加解析资源(loader)并且指定loader解析顺序

3、在入口文件（index.js)中导入css文件require('xxx.css')

4、最终打包好的css都是以js添加到html<style>标签中。
module.exports = {
    module:{
            rules:[
                {
                    //设置规则test，匹配所有后缀名为.css的文件，
                    //使用use来指定解析资源，解析顺序从后往前。
                    test:/\.css/,
                    //先用css-loader将css解析打包到js文件中，在从js文件打包到html文件的<style>中。
                    use:['style-loader','css-loader']
                }
            ]
    }
}  

打包成单独的css文件（不在style标签中）
使用插件来打包单独的css文件
1、下载插件
npm i mini-css-extract-plugin -D
2、引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3、使用插件
module.exports = {
　　plugins:[
　　　　//默认打包成的文件名是main.css
　　　　new MiniCssExtractPlugin()
　　　　//指定打包后的文件名
　　　　filename:'xxx.css'
　　]
}

　　打包less和sass文件

//通过npm下载lessloader、sass-loader来解析less\sass文件
npm i less-loader -D
npm i sass-loader -D

module.exports = {
    module:{
            rules:[
                {
                    //设置规则test，匹配所有后缀名为.less的文件，
                    //使用use来指定解析资源，解析顺序从后往前。
                    test:/\.css/,
                    //先用less-loader将后缀名为less的文件解析成css,然后通过css-loader打包到js文件中，在从js文件打包到html文件的<style>中。
                    use:['style-loader','css-loader','less-loader']
                }
                {
　　　　　　　　　　　　//匹配scss文件
　　　　　　　　　　　　test:/scss/,
　　　　　　　　　　　　//先用sass-loader将scss文件转成css,然后css-loader打包到js，再打包到html的<style>标签中。
　　　　　　　　　　　　use:{'style-loader','css-loader','sass-loader']
　　　　　　　　　 }
            ]
    }
}  

webpack解决css浏览器兼容问题

由于老版本浏览器很多不支持css3的语法，此时webpack可以帮我们轻松解决

1、首先我们需要用到postcss-loader和postcss-preset-env插件，所以先下载。
npm install postcss-loader postcss-preset-env -D
2、在module属性中指定loader
module:{
        rules:[
            {
                test:/\.css/,
                use:[MiniCssExtractPlug.loader,'css-loader','postcss-loader']    
                //放到最后的目的就是想解决了语法问题后再打包到js中，最后在打包成独立的css文件。
            }
        ]
}
3、loader指定好后，我们需要创建postcss.config.js配置文件，在这个配置文件中去导入postcss-preset-env这个插件。webpack会默认去查询这个配置文件，

module.exports = {
    plugins:[
        require("postcss-preset-env")()
    ]
}
4、最后在package.json文件添加浏览器兼容规则
//俩种方式：对象{模式（开发模式，生产模式），规则}、数组【规则】
"browserslist": [
    "> 0.2%",
    "last 2 version"
  ]

 

webpack配置开发服务器

webpack-dev-server可以在你手动保存后自动执行打包文件，打开浏览器，刷新浏览器，减去开发中频繁手动打包的一些麻烦。

module.extrats = {
    //通过使用webpack-dev-server实现浏览器自动刷新 webpack5需要加上
    target: "web",  

}
可以修改端口号和主机名
webpack serve --port <端口号> --host <主机名>
可以通过config.js的devServer参数添加多个功能
devServer: {
　　//设置端口号
　　post: 8080，
　　//打包时压缩
　　compress: true,
　　//自动打开浏览器
　　open: true


}