Webpack疾速入门

  • 相识Webpack相干

    • 什么是webpack

      • Webpack是一个模块打包器(bundler)。

      • 在Webpack看来, 前端的一切资本文件(js/css/img/less/…)都邑作为模块处置惩罚

      • 它将依据模块的依靠关联举行静态剖析,天生对应的静态资本

    • 明白Loader

      • Webpack 自身只能加载JS模块,假如要加载其他范例的文件(模块),就须要运用对应的loader 举行转换/加载

      • Loader 自身也是运转在 node.js 环境中的 JavaScript 模块

      • 它自身是一个函数,接收源文件作为参数,返回转换的结果

      • loader 平常以 xxx-loader 的体式格局定名,xxx 代表了这个 loader 要做的转换功用,比方 json-loader。

    • 设置文件(默许)

      • webpack.config.js : 是一个node模块,返回一个 json 花样的设置信息对象

    • 插件

      • 插件件能够完成一些loader不能完成的功用。

      • 插件的运用平常是在 webpack 的设置信息 plugins 选项中指定。

      • Webpack 自身内置了一些经常使用的插件,还能够经由过程 npm 装置第三方插件

  • 进修文档 :

  • 你将学到:

    • How to install webpack

    • How to use webpack

    • How to use loaders

    • How to use the development server

    • How to use image

  • 初始化项目: package.json

    {
      "name": "webpack_test",
      "version": "1.0.0"
    } 
  • 装置webpack

    npm install webpack@1 -g  //全局装置
    npm install webpack@1 --save-dev  //部分装置
  • 最先编译

    • 建立进口src/js/ : entry.js

      document.write("entry.js is work");
    • 建立主页面 build/: index.html

      <script type="text/javascript" src="js/build.js"></script>
    • 编译js

      webpack src/js/entry.js build/js/build.js  
    • 检察页面结果

  • 第二个js

    • 建立第二个js: src/js/content.js

      module.exports = " <br> It works from content.js";
    • 更新进口js : entry.js

      * document.write("entry.js is works.");
      * document.write(require("./content.js"));
    • 编译js:

      webpack src/js/entry.js build/js/build.js
    • 检察页面结果

  • 第一个加载器(loader)

    • 装置款式的loader

      npm install css-loader style-loader --save-dev
    • 建立款式文件: src/css/test.css

      body {
        background: red;
      }
    • 更新进口js : entry.js

      + require("style-loader!css-loader!../css/test.css");
      * document.write("entry.js is works.");
      * document.write(require("./content.js"));
    • 编译js, 并检察页面结果

      webpack src/js/entry.js build/js/bundle.js
  • 绑定加载器

    • 更新进口js : entry.js

      - require("style-loader!css-loader!./test.css");
      + require("./test.css");
    • 编译:

      webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader
    • 检察页面结果

  • 运用webpack设置文件

    • 建立webpack.config.js

      module.exports = {
        entry: "./src/js/entry.js",//进口途径设置
        output: {//出口设置
            path: __dirname + '/build/js',//输出途径
            filename: "bundle.js"//输出文件名
        },
        module: {
          loaders: [//模块加载器设置
            { test: /\.css$/, loader: "style!css"}  //一切css文件声明运用css-loader和style-loader加载器
          ]
        }
      };
    • 编译

      webpack
      webpack --progress   //编译显现进度
    • 题目—每次修正模块文件内容的从新手动打包,革新

    • 自动编译

      webpack --watch  //编译并启动看管(但须要革新阅读器)
      
    • 阅读器自动革新(热加载)—-处理手动革新阅读器题目

      npm install webpack-dev-server@1 -g
      webpack-dev-server
        接见: http://localhost:8080/webpack-dev-server/
            ; http://localhost:8080
        !!!发明题目----接见的是文件夹途径而不是页面
          devServer:{
                contentBase: './build',//内置效劳器动态加载页面地点的目次
                historyApiFallback:true,//不跳转
                inline:true
            }
            
          contentBase : 默许webpack-dev-server为根文件夹供应内置的效劳,假如其他目次下的文件
                        供应效劳须要在此设置目次(我们设置为build文件夹)
          historyApiFallback : 开发单页面的时刻异常有效,它依靠于H5的 history API,当
                              设置为true的时刻一切的跳转都指向index.html;
          port:能够设置端口号,不设置时刻默许为 8080
          inline : 设置为true的时刻回自动革新(有的版本须要合营hot : true运用)
          
        webpack-dev-server
        接见: http://localhost:8080
        
       题目:页面没有热加载,自动革新,由于index的src引入的硬盘中的build文件而不是webpack-dev-server效劳器内存中的build
      特性:
        自动编译并革新界面
        不天生编译后的文件, 直接在内存中编译处置惩罚, 并启动效劳器运转项目
  • 加载图片

    • 装置依靠的loader

      npm install url-loader file-loader --save-dev
      url-loader比file-loader功用越发完美是对file-loader的上层封装,但两者需合营运用
    • 增加config中loader的设置

      { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" }  //假如图片小于limit就会举行Base64编码
    • 拷入2张图片:

      • 小图: img/logo.png

      • 大图: img/big.jpg

    • 定义援用图片的款式: test.css

      #box1{
        background-image: url(../img/logo.jpg);
        height: 200px;
        width: 200px;
      }
      #box2{
        background-image: url(../img/big.jpg);
        height: 200px;
        width: 200px;
      }
    • 在页面援用款式或图片: index.html

      <div id="box1"></div>
      <div id="box2"></div>
    • 编译并阅读

      webpack-dev-server
    • 图片打包题目

      1、图片大于8kb的时刻没法打包到js文件中,
      2、index.html引入js的时刻发明没有打包进去的图片途径不对
      3、处理方法: 
          * //publicPath : './js/',//webpack的绝对途径,设置效劳index.html资本的途径
  • 设置npm script敕令

    "scripts": {
      "start": "webpack-dev-server",
      "build": "webpack"
    }
     
    npm start: 编译运转项目
    npm build: 编译打包
    
    原文作者:booder
    原文地址: https://segmentfault.com/a/1190000010295111
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞