王文健的博客笔记


请多指教

webpack 3.0+ (Ⅱ) 基础升级,项目打包使用配置

写在前面

虽然学习到了一些webpack的基础使用,但在对项目的打包过程中发现仍不能使用,有许许多多的坑,主要在打包后图片引入这块耗时很久,有些概念也不好理解,网上找了所有很多文章都没什么效果,写下本篇记录使用过程

注:我写这篇博客时使用的是3.10.0版本,可在命令行输入 'webpack -v' 查询使用版本
webpack2.png

js代码压缩

项目中JS代码,在上线之前,都是需要进行压缩的,你可能找一个压缩软件或者在线进行压缩,在Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的

插件uglifyjs-webpack-plugin,注意本插件是webpack自带,所以无需安装直接引入使用即可

引入

const uglify = require('uglifyjs-webpack-plugin');

使用

plugins:[
        new uglify()
    ]

运行webpack即可看到结果

CSS中的图片处理

图片处理就是我用webpack最头疼的问题

相关loader

  • file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

  • url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

注:url-loader是对file-loader的封装,只使用这一个插件即可满足需求

安装

npm install --save-dev url-loader

使用

    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:8194,
                       outputPath: 'images/' //图片打包后不转换base64的图片目录
                   }
               }]
            }
          ]
    },
  • limit:设置8194是把小于8k的文件打成Base64的格式,直接写入js,无需引入,超过8kfile-loader打包图片到输出文件,css中引入
  • outputPath:大于8k不转换为base64的图片放到dist/下的images/

CSS从js中分离出去

我们把项目打包后js与css都打包在一起,虽然这样与分离开来并没有什么区别,但有的时候我们还是想要分离出来的css,完成分离需要用到extract-text-webpack-plugin插件

安装

npm install --save-dev extract-text-webpack-plugin

引用

const extractTextPlugin = require("extract-text-webpack-plugin");

使用:

在plugins中使用,参数为css打包后的在dist/文件夹中的目录

 new extractTextPlugin("/css/index.css")

插件配置完成后,还要修改原来我们的style-loader和css-loader配置。

module:{
        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:8194,
                       outputPath: 'images/' 
                   }
               }]
            }
          ]
    },

css图片路径问题解决办法

无论css分不分离都会有图片路径问题,最直接有效的方法就是在入口文件初设置publicPath

output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "http://localhost:8080"
    },

publicPath直接把所有输出路径改为绝对路径,上线项目改为当前域名,连接到服务器目录下;本地调试,用webpack的热更新或者live-server之类的插件在web端起个服务器,直接把当前服务器地址如http://localhost:8080当做输出绝对路径即可

HTML中的图片

在前端开发中,开发者常常喜欢在html中用img标签引入图片,若要将其中图片打包会用到一个loader: html-withimg-loader

安装

npm install html-withimg-loader --save

使用

{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

Less与Sass文件的打包和分离

Less与sass是CSS 预处理语言,它扩展了css语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展,把其编译打包成普通的css也是webpack常用的功能

sass与less使用没什么区别这里以less为例

安装

要使用Less,我们要首先安装Less的服务

npm install --save-dev less

需要安装Less-loader用来打包less。

npm install --save-dev less-loader

使用

{
    test: /\.less$/,
    use: [{
           loader: "style-loader" 
        }, {
            loader: "css-loader" 
        , {
            loader: "less-loader" 
        }]
}

less打包最后当然也要用到style-loadercss-loader
运行webpack打包即可

注:sass使用几乎与之相同,但sass使用安装的模块叫 node-sass

{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                fallback: "style-loader"
            })
 }

将打包编译后的less分离出来也与css分离一样,只是要多配置一个less-loader

用babel 转换编译es语法

我们平时写es6或者之上的语法时常常用babel转换成es5,在webpack中也可直接配置

Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包,所以我们需要安装以下包

  • babel-core核心功能包
  • babel-loader
  • babel-preset-env或者用babel-preset-es2015也行

全部安装后使用

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "env"//如果用es2015此处改为**es2015**
            ]
        }
    },
    exclude:/node_modules/
}

注:可以把babel配置单独写在配置另一个里,在配置文件同级目录下新建.babelrc目录,写入

{
    "presets":["react","es2015"]
}

即可

到此,平常基本项目中一些常用的打包基本都有涉及到,基本可以满足打包一个小项目的目的了,在学习的过程中也了解到webpack一些优化的功能,例如,css3加兼容性的前缀,css去冗余,如何打包一个第三方库之类的功能,有时间会再新写一篇

注:有不明白的地方可以学习这篇博客教学,更加齐全和专业

未经允许不得转载:王文健的博客笔记 » webpack 3.0+ (Ⅱ) 基础升级,项目打包使用配置

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
Copyright & copy; 2018 @王文健. All rights reserved.

小编留言

本网站是作者学习路上的一个见证,记录和敦促我的学习生活,也希望借此结交更多前辈好友。记录作者在学习生活的点点滴滴,愿与你一同进步,共勉!

Copyright & copy; 2018 @王文健. All rights reserved.

感谢 WordPress DUX 提供的参考模板与设计,阿里云提供的优质云服务,使我完成本网站的制作