玩轉webpack之webpack的基本知識

相信看了gulp教程的小夥伴肯定都可以很容易的掌握gulp了。它已經沒有什麼可以值得去思考的東西了，如果你已經看懂它就是單純的在布置任務，然後利用插件的功能去執行任務。最後釋出任務，pipe的理念來和promise有點相近，就是感覺把一個東西通過src的方法塞進去，然後一個接着一個的沖關，最後dest方法再出去。很簡單吧。

在gulp grunt大戰中，gulp最終更加赢得人們的喜歡，雖然不可以認為他勝利了。然而就在他倆争的不可開交的時候，webpack的橫空出世，讓gulp和grunt都翻了一個跟頭。是以，這個神秘的webpack做了什麼呢。。。。好奇的話，我們就繼續看下去吧。。。。

webpack是被人們如此評價的

Webpack 是當下最熱門的前端資源子產品化管理和打包工具。它可以将許多松散的子產品按照依賴和規則打包成符合生産環境部署的前端資源

webpack 的任務模式和gulp不一樣

先看一下代碼吧

module.exports = {
    entry: {
        main: './src/js/page/qiao.js'
    },
    output: {
        path:__dirname+'/dist/js/page',
        filename:'[name].js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
};      

這是webpack最主要的三個部分，編譯的入口檔案，編譯的出口檔案，編譯的loader

相當于gulp的src pipe dest

就是說把一個檔案通過entry放進去，然後在loaders裡根據檔案的格式然後去選擇對應的loader，就是編譯器，最後在output裡邊輸出檔案。

這便是webpack的思想。我們然後一步步看看他具體怎麼工作的。

step1 開始前的準備工作，npm init建立package.json，添加devDependencies，然後npm install添加子產品和包

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^2.4.5",
    "webpack": "^2.4.1"
  }
}      

 step2 用工具幹活 建立webpack.config.js，相當于gulpfile.js。

格式必須module.exports = {}的方式去寫，

module.exports = {
    entry: {
        main: './src/js/page/qiao.qm'
    },
    output: {
        path:__dirname+'/dist/js/page',
        filename:'[name].js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
};      

  step3 執行編譯

 輸入webpack執行編譯

 這就是webpack的基礎能力啦。然後更加牛逼的操作，我們在後邊一一展開。

轉載于:https://www.cnblogs.com/sowhite/p/6806195.html