知识 分享 互助 博彩评级

    博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    博彩评级提供网页素材下载、网站模板
    知识 分享 互助!

    webpack安装与配置

    作者:佳明妈 来源:web前端开发 2016-09-14 人气:
    webpack是一个前端工具,可以让我们进行各种模块加载,预处理后,再打包,任何静态资源都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们

    webpack功能特性

    1. 支持CommonJs和AMD模块,意思也就是我们基本可以无痛迁移旧项目。
    2. 支持模块加载器和插件机制,可对模块灵活定制。特别是我最爱的babel-loader,有效支持ES6。
    3. 可以通过配置,打包成多个文件。有效利用浏览器的缓存功能提升性能。
    4. 将样式文件和图片等静态资源也可视为模块进行打包。配合loader加载器,可以支持sass,less等CSS预处理器。
    5. 内置有source map,即使打包在一起依旧方便调试。

    本文地址:http://www.qqydc.com/javascript/webpackazypz_1090.html
    文章摘要:webpack安装与配置 ,正反强本弱支刘华,演奏边民池塘。

    webpack是一个前端工具,可以让我们进行各种模块加载,预处理后,再打包,任何静态资源都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们想要的静态资源。

    安装webpack

    首先新建一个webpack101的项目,在cmd下面进入webpack101目录

    我们通过npm来将webpack安装到全局

    npm install webpack -g

    一个最简单的webpack配置示例

    webpack配置

    webpack是需要进行配置的,我们在使用webpack的时候,会默认 webpack.config.js 为我们的配置文件。所以接下来,我们新建这个js文件。

    //webpack.config.js
    var path = require("path");
    module.exports = {
      entry: '../src/entry.js', //演示单入口文件
      output: {
        path: path.join(__dirname, 'out'),  //打包输出的路径
        filename: 'bundle.js',		//打包后的名字
        publicPath: "./out/"		//html引用路径,在这里是本地地址。
      }
    };
    

    编写入口示例文件

    接下来就编写我们的入口文件 entry.js 和第一个模块文件 module1.js 。里面只用来加载一个Js模块。

    // entry.js
    require("./module1"); // 使用CommonJs来加载模块
    // module1.js
    console.log("Hello Webpack!");

    启动webpack

    一切准备好后,我们仅需要在项目根目录下,用命令行 webpack 执行一下即可。

    // webpack 命令行的几种基本命令
    
    webpack     // 最基本的启动webpack方法
    webpack -w // 提供watch方法,实时进行打包更新
    webpack -p // 对打包后的文件进行压缩,提供production
    webpack -d // 提供source map,方便调试。

    webpack成功运行后,我们就可以看到根目录出现了out文件夹,里面有我们打包生成的 bundle.js 。我们最后通过在 index.html 里对这个文件引入就可以了。我们可以在控制台看到我们想要的结果, Hello Webpack !

    多模块依赖

    刚才的例子,我们仅仅是跑通了webpack通过 entry.js 入口文件进行打包的例子。下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢?下面我们新建多几个js文件吧!

    // 修改module1.js
    require(["./module3"], function(){
      console.log("Hello Webpack!");
    });

    下一个文件

    // module2.js,使用的是CommonJs机制导出包
    module.exports = function(a, b){
      return a + b;
    }

    下一个文件

    // module3.js,使用AMD模块机制
    define(['./module2.js'], function(sum){
      return console.log("1 + 2 = " + sum(1, 2));
    })

    这里仅仅是展示用的,在做项目的时候一定要统一规范采用同一种规范编写代码

    加载器loader

    大家都听过的就是 CoffeeScript 和 Sass 了,webpack可以一次性解决这些预处理器问题

    这里用Sass和babel编译ES2015为例

    安装loader

    我们第一步就是先要安装好各个必须的loader,使用npm安装如下loader

    npm install style-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev

    在webpack.config.js中配置loader

    安装完各个loader后,博彩评级:需要在webpack.config.js中配置loader,载入这些加载器。

    // webpack.config.js
    module.exports = {
      entry: path.join(__dirname, 'src/entry.js'),
      output: {
        path: path.join(__dirname, 'out'),
        publicPath: "./out/",
        filename: 'bundle.js'
      },
      // 新添加的module属性  注意query: {presets: ['es2015']},没有这个你要用es6的语法可能不会被转换成es5
      module: {
        loaders: [
          {test: /\.js$/, loader: "babel",query: {presets: ['es2015']} },
          {test: /\.css$/, loader: "style!css"},
          {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
          {test: /\.scss$/, loader: "style!css!sass"}
        ]
      }
    };
    

    我们主要看看module的loaders。loaders是一个数组,里面的每一个对象都用正则表达式,对应着一种配对方案。比如匹配到js后缀名就用babel-loader,匹配到scss后缀名的就先用sass,再用css,最后用style处理,不同的处理器通过 ! 分隔并串联起来。这里的loader是可以省略掉 -loader 这样的,也就是原本应该写成 style-loader!css-loader!sass-loader ,当然我们必须惜字如金,所以都去掉后面的-loader 如:style!css!sass

    我们仅仅是配置一下,已经是可以直接用ES2015和SASS去写我们的前端代码了。在此之前,我们对src文件夹里再细分成js,css,image三个文件夹,处理好分层。

    稍微复杂的webpack项目

    bebel-loader(解析es6的加载器)

    // js/es6-module.js
    class People{
      constructor(name){
        this.name = name;
      }
      sayhi(){
        console.log(`hi ${this.name} !`);
      }
    }
    exports.module = People;

    写好模块后,我们直接在 entry.js 入口文件中引入该模块。

    // entry.js
    
    // javascript
    require('./js/module1');
    let People = require('./js/es6-module');
    let p = new People("Yika");
    p.sayHi();
    
    // css
    require('./css/main.scss');
    有了这个解析es6的加载器bebel-loader就可以在js代码中使用es6语法和es6特性,如果你会es6的话,es6写js代码已经是大势所趋了,现在git上分享的代码很多都开始用es6语法了,不会es6就看不懂人家的代码了。

    sass-loader(解析sass的加载器)

    大家或许注意到了下方的css的require,那就是用来加载Sass样式的。我们通过启动style-loader会将css代码转化到 <style> 标签内,我们看一下里面的内容。

    // css/main.scss
    html, body{
      background: #dfdfdf;
    }

    最后我们打开 index.html 观察我们所有的结果,首先背景已经是淡灰色的,并且控制台也有我们想要的内容。我们通过查看DOM结构,可以发现 head 标签里多出了style 标签,里面正是我们想要定制的样式。

    webpack对图片打包

    我们之前也说,webpack对与静态资源来说,也是看作模块来加载的。CSS我们是已经看过了,那图片是怎么作为模块打包加载进来呢?这里我们可以想到,图片我们是用url-loader加载的。我们在css文件里的url属性,其实就是一种封装处理过require操作。当然我们还有一种方式就是直接对元素的src属性进行require赋值。

    div.img{
      background: url(../image/img.jpg)
    }
    
    //或者
    var img = document.createElement("img");
    img.src = require("../image/img.jpg");
    document.body.appendChild(img);

    上述两种方法都会对符合要求的图片进行处理。而要求就是在url-loader后面通过query参数的方式实现的,这里就是说只有不大于8kb的图片才会打包处理成Base64的图片。关于queryQuery parameters

    {test: /\.(jpg|png)$/, loader: "url?limit=8192"}

    打包成多个资源文件

    在开发多页面的站点的时候,还是需要希望能有多个资源文件的。这样我们就可以有效利用缓存提升性能,做到文件按需加载。如何写入口文件,这里就不再赘述了,我们直接看如何对 webpack.config.js 进行修改。

    // webpack.config.js
    
    entry: {
      page1: "entry.js",
      page2: "entry2.js"
    },
    output: {
      path: path.join(__dirname, 'out'),
        publicPath: "./out/",
        filename: '[name].js'
    }

    这里重点关注两个地方,entry属性可以是一个对象,而对象名也就是key会作为下面output的filename属性的 [name] 。当然entry也可以是一个数组,更多用法都可以去webpack的 官方文档 进行查看。

    当然webpack也考虑到公共模块的利用,我们利用插件就可以智能提取公共部分,以提供我们浏览器的缓存复用。我们只需要在 webpack.config.js 添加下面的代码即可。

    // 修改添加,webpack.config.js
    var webpack = require('webpack');
    module.exports = {
      // ....省略各种代码
          plugins: [
            new webpack.optimize.CommonsChunkPlugin('common.js')
          ]
    }

    我们做个小测试,让第二个入口文件也加载我们之前的 es6-module.js 。然后我们用webpack进行打包,就发现生成的 common.js 里是有相应代码的。我们需要手动在html上去加载 common.js ,并且是 必须要最先加载 。

    独立出css样式

    如果我们希望样式通过 <link> 引入,而不是放在 <style> 标签内呢。这个时候我们就要配合插件一起使用啦,我们一起来看看。

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

    安装完插件就要配置 webpack.config.js 了。我们添加以下代码

    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
      // ...省略各种代码
      module: {
        loaders: [
          {test: /\.js$/, loader: "babel"},
          {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
          {test: /\.(jpg|png|svg)$/, loader: "url?limit=8192"},
          {test: /\.scss$/, loader: "style!css!sass"}
        ]
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js'),
        new ExtractTextPlugin("[name].css")
      ]
    }
    

    为了区分开用 <link> 链接和用 <style> ,我们这里以CSS后缀结尾的模块用插件。我们重点关注一下使用了ExtractTextPlugin的模块,在ExtractTextPlugin的extract方法有两个参数,第一个参数是经过编译后通过style-loader单独提取出文件来,而第二个参数就是用来编译代码的loader。

    当然,插件也支持所有独立样式打包成一个css文件。增加多一个参数即可。

    new ExtractTextPlugin("style.css", {allChunks: true})
    ↓ 查看全文

    webpack安装与配置由博彩评级收集整理,您可以自由传播,请主动带上本文链接

    博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    webpack安装与配置-最新评论