webpack的教程

唠唠嗑

 前几天在学习webpack时,踩过很多坑，也听过webapck是多么的哔哔哔哔~~， 本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。鉴于webpack死粉所说的,不全用webpack的人不是一个好前端,我想我会送你 老中医歌里面的一句--一顿五毒排逼掌,把脑袋打放屁~ -.-~ 所以后面会介绍使用gulp和webpack的结合使用。

 废话不多说,小伙子，让我们来一起谈谈webapck;

webapck的基本认识

 webpack 最大的好处就是, 在前端的世界里,js才是王~简而言之就是, 其他的资源都可以在js里面引入,并且打包,比如: CSS, .SCSS, .LESS, .JSX,image 等等其他的资源。当然，为了处理scss,jsx在浏览器端的使用，还需要另外一个重要的东西,xxx-loader;
就像这样:

//在main.js
require("./style.css");
require('./c.css');
require('./a.js');

 另外就是他的module打包的工具, 无论你是在后端的commonJS 的写法, 还是browser 端的CMD/AMD,requireJS/seaJS等,统统一键搞定。接下来让我使用webpack吧. just do it;

初识webpack

我们一步一步来:

下载webpack

npm install webpack -g;

这样就可以在gitBash里面使用webpack命令;
webpack的基本命令:

// webpack 命令行的几种基本命令

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

建立工程目录:
为了方便，我们来建立一个简单的目录:
大家可以按照我下面的目录建立~

我们来解释一下:
 example.js就是你写的主文件，可以各种引用。
 webpack.config.js就是webpack的核心文件.

webpack.config.js的配置:
请先下载:
npm i loader-css file-loade;
这两个模块都会用到

var path = require('path');
module.exports = {
     entry: {
      example:'./example.js'
    }, //演示单入口文件
    output: {
        path: path.join(__dirname, 'out'), //打包输出的路径 
        filename: '[name].entry.js', //打包后的名字
    },
    module: {
        loaders: [  //这就是前面所提到的loader
            {
                test: /\.css$/,
                loader:"css"
            },
            { test: /\.png$/, loader: "file-loader" }
        ]
    }
    
};

其中
test用来指定执行哪些文件的后缀.。
loader指定执行的方法命令。
按照上面的写就可以了，你也可以直接贴到你的代码中去.

我们看看example.js有哪些东西~

//example.js
require("./style.css");
require('./a.js');

就这俩个
然后我们看看a.js里面写的是什么哈~

//a.js
console.log("this is my first webpack project");

运行命令

webpack

接下来请紧盯着你的bash，你会看见一些花花绿绿的带出出来了, 这时候请在心里默念三遍:
no error!
no error!
no error!
如果最后，你的屏幕会是这样的话

恭喜啊~隔壁的老王，你的webpack好了。这时候我们再看一下目录:

会多出来一个目录:out!!!, 说明你的处女webpack终于破了。

我就呵呵了,还有谁!!!(Ps:小智)