webpack

webpack出了很久,碍于工作原因一直没有机会使用,近期有时间,就来学习一样。


    • what

      • 模块打包机

        • 分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用
        • 在3.0出现后,Webpack还肩负起了优化项目的责任。
        • 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
        • 转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
        • 优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。
    • why-前端为什么要使用webpack

      • 前端技术发展,代码越来越复杂,经常需要依赖一些依赖包或拓展语言,如lesssass等,使用webpack打包工具,可以有效的帮助我们编译这些依赖包语法,适应于浏览器。
  • 安装

    • 全局安装(不推荐)

      • 1
        npm install -g webpack
      • 缺点:

        • 会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。
    • 假如一开始全局安装2的版本,新建项目用的3的版本,这样项目就会构建失败。

    • 项目目录安装

      • 新建目录

      • 初始化

        • npm init
        • 生成package.json文件
          • 可以直接生成以后在package.json文件中修改配置
      • 安装webpack

        • 1
          npm install --save-dev webpack
- --save-dev(保存在开发版本中)
  • –save (保存在生产环境中)

    • 安装webpack cli(3.0+)

      • npm i webpack-cli -D
        • npm i -D 是 npm install –save-dev 的简写
  • 安装失败

    • 检查node的版本号是否过低(node -v)
      • 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/。
    • 权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装。
    • 查看版本

      • npm webpack -v
    • webpack -v(安装的有webpack cli)

  • 使用

    • 终端打包(不常用)

      • 项目结构

        • 项目中准备src文件夹和dist文件夹
        • src文件夹:用来存放我们编写的javascript代码,即原始的开发代码。
        • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包生成的文件。
      • 打包

        • 3.0+

          • webpack src/index.js dist/index.bundle.js
        • 4.0+

          • webpack src/index.js -o dist/index.bundle.js
    • 配置文件打包(多入口多出口)

      • 项目结构

        • 项目中准备src文件夹、dist文件夹、webpack.config.js文件
        • src文件夹:用来存放我们编写的javascript代码,即原始的开发代码。
        • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包生成的文件。
        • webpack.config.js文件:webpack配置文件
      • webpack.config.js

        • 定义path

          • 1
            const path = require('path');
        • module.exports:暴露

          • entry:{入口}
            • name:’url’
              • name为自定义参数名
        • 对应出口的[name]

          • output:{出口}
            • path:path.resolve(__dirname,’dist’)
              • node的语法,代表dist文件夹路径
            • filename:’[name].js’
              • name表示和打包前文件名字一样
          • module:{模块,主要是解析CSS和图片转换压缩等功能}
          • plugins:[插件,用于生产模版和各项功能]
          • devServer:{服务}
      • 运行

        • 终端输入webpack即可打包
  • 服务与热更新

    • 作用

      • 便于修改保存代码后,页面直接能刷新显示修改项
      • 无需重新打包等
    • 配置

      • 在webpack.config.js中对devServer选项进行配置
        • contentBase:配置服务器基本运行路径,用于找到程序打包地址。path.resolve(__dirname,’dist’)
          • 如果不设置,则默认是项目的目录
          • dist表示运行的目录文件夹名
        • host:服务运行地址,建议使用本机IP
          • 默认为localhost
        • compress:服务器端压缩选型,一般设置为开启,如果你对服务器压缩感兴趣,可以自行学习。
        • port:服务运行端口,建议不使用80,很容易被占用,这里使用了1717
        • historyApiFallback:返回404页面时重定向
          • rewrites:[ {from:/./,to:’/404.html’} ]
        • overlay:编译出错时在页面上显示错误
          • 默认为false
    • 安装

      • 1
        npm install webpack-dev-server --save-dev
    • 运行

      • node_modules/.bin/webpack-dev-server

      • 打开浏览器,进入localhose:8080

        ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.8036843433224872.png)

    • 停止运行

      • ctrl+c
  • Loaders

    • 功能

      • 通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。
      • 如将SASS文件转换成CSS,ES6代码转化成浏览器能兼容的JS代码,JSX转化成JS
    • 安装

      • 所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。
    • 配置

      • test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
      • use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
      • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
      • query:为loaders提供额外的设置选项(可选)
  • CSS打包

    • 安装

      • style-loader
        • 1
          npm install style-loader --save-dev
      • css-loader
        • 1
          npm install css-loader --save-dev
  • 使用

    • 在js中引入css
      • import css from ‘./css/common.css’;
    • require(‘./css/common.css’);

  • 在webpack.config.js中的module属性中进行配置(3种写法)
    • 对于css文件,先使用css-loader转换,再通过style-loader转换

    • use可以为对象或数组,当为数组时,它的编译顺序从后往前。

      ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.5625951723091596.png)

      ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.9726869001118543.png)

      ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.7879023006304329.png)

  • CSS提取(看情况使用)

    • 插件

      • extract-text-webpack-plugin
    • 安装

      • 1
        npm install extract-text-webpack-plugin -D
    • 使用

      • 引入

        • 在webpack.config.js中require引入

          • 1
            const extractTextPlugin = require('extract-text-webpack-plugin');
- ### 配置

  - webpack.config.js中plugins中配置

    - new extractTextPlugin('/css/index.css')
  - 这里的/css/index.css是分离后的路径位置。

- 修改webpack.config.js中modules里css文件打包的配置

    ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.19871031393429295.png)

  - extractTextPlugin.extract(options:loader|object)

    - options.use:指需要什么样的loader去编译文件
- options.fallback:编译后用什么loader来提取css文件
    - options.publicfile:用来覆盖项目路径,生成该css文件的文件路径
  • 注意

    • 如果css分离路径不对,则可以使用publicPath解决
      • publicPath:output选项,用于处理静态文件路径
    • 写法:“http: //devServer配置的IP和端口/”

      • 优点:加快速度
  • JS压缩

    • uglifyjs-webpack-glugin插件

    • 引入

      • 1
        const uglify = require('uglifyjs-webpack-plugin');
      • plugins : [ new uglify()]

    • webpack4+好像已经自动调用了?

  • HTML打包

    • 位置

      • src文件夹下,无需引入js文件
    • 插件

      • html-webpack-plugin
    • 安装

      • 1
        npm install html-webpacl-plugin --save-dev
    • 引入

      • webpack.config.js中先引入插件

        • 1
          const htmlPlugin= `require`('html-webpack-plugin');
- ### 在plugins中配置

  ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.992537507561658.png)



  - minify:是对html文件进行压缩,removeAttrubuteQuotes是却掉属性的双引号。
- hash:为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
  - template:是要打包的html模版路径和文件名称。
  • 图片处理

    • 位置

      • src/images
    • 插件

      • url-loader

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

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

      • 1
        npm install file-loader url-loader --save-dev
    • loader不需要引入

    • 配置

      • 在modules中配置

        ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.855049943065711.png)

        • test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
        • use:是指定使用的loader和loader的配置参数。
        • limit:是把小于500000B的文件打成Base64的格式,写入JS。
        • outputPath:输出路径
    • 注意

      • url-loader封装了file-loader,且不依赖于file-loader,使用url-loader时,只需要安装url-loader即可。
      • 此处安装file-loader只是便于后期使用
      • 1.文件大小小于limit参数,url-loader将会把文件转为DataURL(Base64格式);
      • 2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。
  • html中的图片处理

    • loader

      • html-loader
    • 安装

      • 1
        npm install html-withimg-loader --save-dev
    • 配置

      • 在modules中配置test和use
  • LESS、SASS配置

    • LESS

      • 安装

        • 1
          npm install less -D

          【less安装包

        • 1
          npm install less-loader -D

          【less-loader

      • 配置

        • webpack.config.js中的modules中配置

          ![img](file:///C:/Users/49121/Documents/My Knowledge/temp/12236fbf-e361-497d-a5b5-ded3b49d4966/128/index_files/0.8031091758987152.png)

        • 编写一个less文件

        • 引入到js文件中

          • 1
            import less from './css/black.less';

参考资料:

技术胖:Webpack3.X版 成神之路 (共24集)