专栏首页菜鸟计划webpack学习(五)配置详解

webpack学习(五)配置详解

配置详解

//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
    entry: {
        bundle : './src/js/main.js'
    },
    output: {
        filename: "[name]-[hash].js",
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })

            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader?limit=8192'
            }
        ]
    },
   resolve:{
        extensions:['.js','.css','.json']  //用于配置程序可以自行补全哪些文件后缀
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'hello webpack',
            template:'src/component/index.html',
            inject:'body',
            minify:{ //压缩HTML文件
                 removeComments:true,    //移除HTML中的注释
                 collapseWhitespace:true    //删除空白符与换行符
             }
        }),
        new ExtractTextPlugin("[name].[hash].css"),
        new webpack.optimize.UglifyJsPlugin({    //压缩代码
            compress: {
                warnings: false
            },
            except: ['$super', '$', 'exports', 'require']    //排除关键字
        })
    ]
};

module.loader: 其中test是正则表达式,对符合的文件名使用相应的加载器./.css$/会匹配 xx.css文件,但是并不适用于xx.sass或者xx.css.zip文件.

url-loader: 它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。 entry: 模块的入口文件。依赖项数组中所有的文件会按顺序打包,每个文件进行依赖的递归查找,直到所有模块都被打成包; output:模块的输出文件,其中有如下参数: filename: 打包后的文件名 path: 打包文件存放的绝对路径。 publicPath: 网站运行时的访问路径。 relolve.extensions: 自动扩展文件的后缀名,比如我们在require模块的时候,可以不用写后缀名的。 relolve.alias: 模块别名定义,方便后续直接引用别名,无须多写长长的地址 plugins 是插件项;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack学习(一):webpack 介绍&安装&常用命令

    一、简单介绍 什么是Webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

    柴小智
  • CSS基础语法(一) CSS的3种引入

    CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题。可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网...

    柴小智
  • webpack学习(六)打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压...

    柴小智
  • 【第13期】webpack入门学习手记(五)

    前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人...

    siberiawolf
  • webpack4:css/sass编译优化分离,处理引用资源

    在上篇中,解决了webpack4关于多页面及分离第三方库js和共用自定义库js的配置,本篇将以此为基础继续配置css引入、分离等功能。

    前端_AWhile
  • 【Webpack】319- Webpack4 入门手册(共 18 章)(上)

    最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水...

    pingan8787
  • WebPack 模块化打包工具(下)

    本篇博文的内容根据 入门 Webpack,看这篇就够了 该篇文章总结而来,其代码、模块示例、功能拓展部分均有所删减,若是想了解更多关于 WebPack 的详细内...

    Nian糕
  • webpack4实用配置指南-上手篇

    算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感,比较捉急。工具用法的东西,好记性不如烂笔头,有必要系统梳理下webpac...

    elson
  • Fis3 构建迁移 Webpack 之路

    本篇文章主要介绍从 Fis 迁移到 webpack 遇到的问题和背后的黑科技,内容包括 inline-resource、多页面构建、资源压缩、文件hash、文件...

    腾讯IVWEB团队
  • 07 . 前端工程化(ES6模块化和webpack打包css,less,scss,图片,字体,配置Vue组件加载器和发布项目)

    推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.

    常见_youmen

扫码关注云+社区

领取腾讯云代金券