春风得意马蹄疾
一日看尽长安花

Webpack标准模式使用总结(模式、插件、loader、抽离、压缩)

webpack简介

webpack 是一个模块打包器(module bundler)(例如,Browserify 或 Brunch)。它不是一个任务执行器(task runner)(例如,Make, Grunt 或者 Gulp )。任务执行器就是用来自动化处理常见的开发任务,例如项目的检查(lint)、构建(build)、测试(test)。相对于打包器(bundler),任务执行器则聚焦在偏重上层的问题上面。可以得益于使用上层的工具,而将打包部分的问题留给 webpack
打包器(bundler)帮助我们取得准备用于部署的 JavaScript 和样式表,将它们转换为适合浏览器的可用格式。例如,JavaScript可以压缩、拆分 chunk 和懒加载,以提高性能。打包是 web 开发中最重要的挑战之一,解决此问题可以消除开发过程中的大部分痛点

插件安装

"webpack": "^4.44.2", //webpack工具及脚手架
"webpack-cli": "^3.3.12",
"@babel/core": "^7.12.3",//处理js所需插件
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",//清除上一次打包后的文件
"css-loader": "^5.0.0",//处理css文件
"css-minimizer-webpack-plugin": "^1.1.5",//压缩css
"file-loader": "^6.1.1",//处理普通文件例如图片等
"html-webpack-plugin": "^4.5.0",//html模板的处理插件
"mini-css-extract-plugin": "^1.2.0",//css抽离插件
"node-sass": "^4.14.1",//使用sass
"sass-loader": "^10.0.4",//处理sass
"style-loader": "^2.0.0",//将css插入到header中的style
"url-loader": "^4.1.1",//将资源转为base64格式

webpack.config.js配置文件

const path=require('path');
const {CleanWebpackPlugin} =require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CssMinimizerWebpackPlugin=require('css-minimizer-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const {HotModuleReplacementPlugin} = require('webpack')
//在执行webpack命令时,webpack会读取webpack.config.js文件向外输出的配置
module.exports={
    //打包的模式:devlopment 开发模式   production生产模式  none 不使用任何插件进行打包
    mode:'development',
    //项目的入口文件
    entry:'./src/index.js',
    //项目的输出配置
    output:{
        //入口文件被编译后产生的js文件的名字
        filename:'js/bundle.js',
        //被编译后输出的文件放置的目录
        path:path.join(__dirname,'./dist'),
        //输入的文件引入到html文件上的公共路径
        // publicPath:'/'
    },
    //插件
    plugins:[
        //每一次重新编译前,会删除output.path对应路径的整个文件夹
        new CleanWebpackPlugin(),
        //html模板的处理插件
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./public/index.html'),
            filename:'home.html',
            // publicPath:'/',
            // hash:true,
           //是否压缩
            minify:true,
            title:'首页'
        }),
        //配置抽离css的插件
        new MiniCssExtractPlugin({
            filename:'css/main.css'
        }),
        //热更新第二步,使用热更新的插件
        new HotModuleReplacementPlugin()
    ],
    //配置Loader
    module:{
        rules:[
            //处理css文件
            {
                test:/\.css$/,
                //loader是从后向前执行
                //css-loader将css文件编译成js,style-loader将css插入到html页面的header中作为style标签的内部样式
                // use:['style-loader','css-loader']
                //抽离css文件
                use:[MiniCssExtractPlugin.loader,"css-loader"]
            },
            //处理scss
            {
                test: /\.scss$/,
                // 使用了sass-loader,需要安装node-sass
                // use: ['style-loader', 'css-loader', 'sass-loader']
                // 抽离css
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            //处理图片,url-loader
            {
               test:/\.(jpeg|jpg|png|gif|svg|webp)$/,
               //将资源转为base64格式
               loader:'url-loader',
               options:{
                   //当文件在这个范围之内转为base64,超过这个大小,直接进行拷贝
                   limit:1024*5,
                   outputPath:'image'
               } 
            },
            //处理图片不转base64
            // {
            //     test:/\.(jpeg|jpg|png|gif|svg|webp)$/,
            //     //将跟规则匹配上的文件,进行拷贝,输出到output.path路径上
            //     loader:'file-loader',
            //     options:{
            //         outputPath:'img'
            //     }
            // }
            //处理js
            {
                test:/\.js$/,
                //babel-loader是js编译器
                //寻找babel的配置,先找options,再找.babelrc文件,再找babel.config.js,此处使用第三种,详见下方babel.config.js文件
                loader:'babel-loader',
                exclude:'/node_modules'
            }
        ]
    },
    //优化配置
    optimization:{
        //设置为true ,不管是生产模式还是开发模式都压缩
        //如果不设置,只有生产模式才压缩
        minimize:true,
        //压缩代码使用的工具
        minimizer:[
            //css压缩插件
            new CssMinimizerWebpackPlugin()
        ]
    }
}

babel.config.js配置文件

module.exports = {
  // 插件
  "plugins": [],
  // 预设
  "presets": [
    // 将es6以上的语法转为es5的语法。
    "@babel/preset-env"
    //....
  ]
}
Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » Webpack标准模式使用总结(模式、插件、loader、抽离、压缩)
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x