webpack

2016-11-21 本文已影响73人张Boy

这个东西很好用 -这就是对它的评价

webpack是干啥滴:看这里

作为一个工具，我们只谈论如何它和如何用好它

老样子，第一步创建一个案例文件夹（我的就叫webpack了）

mkdir webpack
cd webpack

安装（这里的前提是你已经安装了node和npm，还没有的话请看我的javascript服务器文集中的初步或者自己搜索安装上）

npm install webpack -g //全局安装，方面使用

环境配置

npm init  
npm install webpack --save-dev  //将webpack配置到config.js中去

预备场地
按照开发web的套路，先创建几个文件

touch index.html style.css main.js

接着在里面随便写点东西

 <!--index.html-->
<html>
  <head>
    <link href='./style.css' type='text/css'/>
  </head>
  <body>
        <script type='text/javascript' src='./main.js'>
  </body>
</html>

/*style.css*/
 body{
    background:#FF0000;
}

//main.js
document.write('hello world！');

现在我们执行index.html在chrome中运行会看到一个红色背景的页面，里面写着hello world!

到这里应该没有一丝的难度(如果有的话,你可以返厂）

开始干
先来一个开胃菜
创建一个js执行文件done.js，将main.js的内容复制进来

cp main.js done.js

然后清空main.js文件的内容
执行webpack命令

webpack ./done.js main.js

你会看到webpack给出的一些明细...
刷新一下index.html页面，发现没有变化～，现在可以看一下main.js文件内容了，密密麻麻的好多～

到这里，你已经对使用webpack入门了。下面我们趁热打铁，说说在项目中你该怎么用，毕竟这个这种方式用起来还是挺麻烦滴
- 配置文件解决麻烦

touch webpack.config.js #你可以创建其他名称的配置文件，但webpack缺省下会执行这个名称的文件

 module.exports = {
    entry:'./done.js' ,  //入口文件，也就是我们刚刚定义的done.js文件
    output:{                   //这有好几种书写方式，我经常用这个^-^
          path:__dirname,                   
          filename:'main.js'
     }
}

为了验证我们配置成功了，将done.js中的输出内容改成changed!
执行命令

webpack //就这个单词就行了，可以看到webpack的执行详情(但没有人会在配置文件中写东西～)

done.js为entry入口文件，这个文件中只写配置，不做具体处理，当然webpack也建议我们这么做

我们这样修改
1.创建一个新的js文件，（我用的是content.js），将done.js内容复制过来,写一些也可以，没俩字。
2.修改 done.js

require('./content')

你可以看效果了

然而并没完，把css和img文件一起打包了
- 先将index.html文件中的css引入删除
- 在done.js中引入 require('./style.css'); (到这里执行webpack并没有效果)
- 安装css加载器

npm install css-loader style-loader

配置webpack.config文件

 module.exports = {
    entry:'./done.js' , 
    output:{                  
          path:__dirname,                   
          filename:'main.js'
     },
     module:{
          loaders:[
                {test:/\.css$/,loader:'style-loader!css-loader'}    //这里的style-loader!和css-loader是可以省略loader的，写成style!css，下面你会看到和他对应的地方
          ]
    }
}

引入css文件——在done.js中加入

require('!style-loader!css-loader!.style.css'); //这里需要看和上面配置文件中的对应点

执行webpack，查看效果
随便搞来一张图片（我已经重命名为1.png），我们来测试webpack的图片加载器
安装url加载器，注意加载图片的不是image-loader而是url-loader

npm install url-loader

配置webpack.config

 module.exports = {
    entry:'./done.js' , 
    output:{                   
          path:__dirname,                   
          filename:'main.js'
     },
     module:{
          loaders:[
                {test:/\.css$/,loader:'style-loader!css-loader'},
                {test:/\.(png|jpg|jpeg|gif)$/,loader:'url-loader?limit = 1024'} //limit是参数，如果小于1k就直接转Base64，可选    
          ]
    }
}

通过webpack加载图片，打开done.js

require('url-loader?mimetype=image/png!./1.png');

页面中该怎么用就怎么用吧！

最后是个重磅的东西，es6自动转码 ----babel-loader
安装

npm install babel-loader babel-core babel-preset-es2015 --save-dev

配置

 module.exports = {
    entry:'./done.js' , 
    output:{                   
          path:__dirname,                   
          filename:'main.js'
     },
     module:{
          loaders:[
                {test:/\.css$/,loader:'style-loader!css-loader'},
                {test:/\.(png|jpg|jpeg|gif)$/,loader:'url-loader?limit = 1024'},
                {test:/\.js$/,loader:'babel-loader?presets[]=es2015'}//这个有多种配置，探究竟请点击下面连接
          ]
    }
}

前方高能，请点击查看

官方声明由于babel-loader执行慢，可以使用babel-runtime,这个和babel配置类似，请点击上面高能地址配置。

好了，这个插件基本就就是这样了，在现代javascript屌炸天的时代开发大中型项目使用还是相当不错的。

案例很短，大家可以自己测试运行，有什么问题欢迎留言，共同探讨！

webpack

这个东西很好用 -这就是对它的评价

猜你喜欢

热点阅读