唠唠嗑

 头几天在进修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:小智)