webpack上手教程

時間 2019-11-10

標籤 webpack 上手教程简体版

原文原文鏈接

什麼是 Webpack？

簡單來講，Webpack 就是一個針對 JavaScript 代碼的模塊打包工具。css

工做方式的對比

gulp:
html
webpack
jquery

gulp是工具鏈、構建工具，能夠配合各類插件作js壓縮，css壓縮，less編譯替代手工實現自動化工做
若是咱們平常使用的時候，不須要使用模塊化這個概念，開發的JS隨便在一個JS裏就OK的狀況，或者沒有什麼聯動性的做用，可使用sublime+gulp+browersync+babel
webpack利用模塊化的概念，基本上通通都用js來寫，Webpack的處理速度更快更直接，能打包更多不一樣類型的文件。webpack

安裝

首先建立一個webpackdemo的文件夾，而後命令行進入到該文件夾下，執行npm init，而後一路回車，輸入yes後就能夠看到文件夾下的package.json文件，這也是咱們全部包都須要的文件依賴。es6

//全局安裝
npm install -g webpack  --registry=http://registry.npm.taobao.org
//安裝到你的項目目錄
npm install --save-dev webpack  --registry=http://registry.npm.taobao.org

先來建立三個文件，一個是html，一個是咱們即將使用的主入口文件index.js，一個是咱們將要引用的文件person.jsweb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>

//index.js
import Person from './second';

let app  = document.createElement('div');
app.className='MyDiv';
app.innerHTML = '<h1>Hello World,I am the index content</h1><h2>Hi,I am the vice content<h2>';
let luren = new Person('張三',18);
document.body.appendChild(app);
console.log(luren.say());

//second.js
class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  say(){
    return `我是${this.name},我今年${this.age}歲了。`;
  }
}
export default Person;

配置webpack.config.js文件

光有了package.json還不夠，爲了更方便，不用本身每次都去輸入各類命令，還要有webpack.config.js文件npm

// entry 入口文件 讓webpack用哪一個文件做爲項目的入口
// output 出口 讓webpack把處理完成的文件放在哪裏
// module 模塊 要用什麼不一樣的模塊來處理各類類型的文件

var path = require('path');

//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  //項目的文件夾 能夠直接用文件夾名稱 默認會找index.js 也能夠肯定是哪一個文件名字
  entry: APP_PATH,
  //輸出的文件名 合併之後的js會命名爲bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //webpack使用loader的方式來處理各類各樣的資源/2.0叫rules，區別不是很大，任何文件運行想要解析都須要通過loader
  module: {
    rules: [
      {
        test: /\.jsx?$/,//首先先去匹配咱們的include文件夾下的包含.js或.jsx後綴名的文件
        include: APP_PATH,//目標文件夾
        use: ['babel-loader']//使用babel-loader處理這些文件
      }
    ]
  },
};

以上就是一個最簡單的webpack.config.js配置文件，其中loaders部分裏只寫了一個babel,就是爲了咱們能快點先看到東西，因此咱們要先裝上babelnpm install babel-core babel-loader babel-preset-latest --save-dev --registry=http://registry.npm.taobao.org。
這裏babel-core顧名思義是babel的核心編譯器. babel-preset-latest是一個配置文件, 意思是轉換ES2015/ES2016/ES2017到ES5, 不僅ES6. babel還有其餘配置文件. 若是隻想用ES6, 能夠安裝babel-preset-es2015:
執行webpack，咱們能夠看到build裏多了一個文件bundle.js，可是隻有文件，這樣的話沒有服務器也是很麻煩，每次改動都須要手動執行webpack。而webpack自帶的一個強大的功能就是自帶開發服務器。json

配置webpack-dev-server

npm install webpack-dev-server --save-dev --registry=http://registry.npm.taobao.orggulp

安裝完成後，如何使用它呢，確定是要在配置文件裏寫上dev-server的配置的數組

// devserver配置選項   功能描述
// port    設置默認監聽端口，若是省略，默認爲」8080「
// inline  設置爲true，當源文件改變時會自動刷新頁面
// colors  設置爲true，使終端輸出的文件爲彩色的
// historyApiFallback  在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲true，全部的跳轉將指向index.html

module.exports = {
  ....
  devServer: {
    host:'0.0.0.0',//有了這個參數，寫上0.0.0.0，咱們就能夠用ip地址訪問了，沒有的話若是別人訪問會被禁止掉的
    historyApiFallback: true,
    hot: true,
    inline: true,
    //progress: true, 已經廢棄，別寫上去
  },
  ...
}

如今配置文件也有了，咱們就能夠走一把，運行webpack-dev-server --hot --inline。而後把咱們的html文件中的script標籤中的src給改掉<script src="http://localhost:8080/bundle.js"></script>,任意改動文件，就能夠看到效果了。這個時候，有的同窗說本身記不住這個命令怎麼辦。那麼就把這命令寫進package.json裏面吧。

// npm的start是一個特殊的腳本名稱，它的特殊性表如今，在命令行中使用npm start就能夠執行相關命令，
// 若是對應的此腳本名稱不是start，想要在命令行中運行時，須要這樣用npm run {script name}如npm run build
...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

下面是webpack-dev-server裏的一些具體參數，能夠看看。

添加css和圖片處理的loader/rule

npm install css-loader style-loader --save-dev --registry=http://registry.npm.taobao.org
而後修改下webpack.config.js的配置文件

//css-loader會遍歷css文件，找到全部的url(...)而且處理
//style-loader會把全部的樣式插入到你頁面的一個style tag中
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        include: APP_PATH
      }

可是如今不少小夥伴又都喜歡使用less或者是sass，以less爲例子，運行npm install less-loader less --save-dev --registry=http://registry.npm.taobao.org,而後再rule中修改正則和use也就是1.x版本中的loaders

{
        test: /\.css|.less$/,
        use: ['style-loader', 'css-loader','less-loader'],//一旦use參數裏的loader是一個數組，記住，執行順序是從右向左，若是寫錯了那就會有問題了。
        include: APP_PATH
      }

css裏面也能夠模塊化的引用其餘css，@import 'xxx.less';，記住，必定要打分號，不像是js是弱類型能夠不帶，這個不帶回報錯的。
處理完了css/less,如今我須要引用圖片了，怎麼辦，假如我在樣式裏寫了網絡路徑的圖片，是沒有問題的，可是假如我隨便寫了一個本地路徑的圖片

.MyDiv{
    background: url('./img/smallPic.png');
}

運行會發現報錯了，錯誤信息是

仍是很清楚的，它說它須要單獨處理該文件的話須要咱們弄一個loader也就是rules來處理他們
執行npm install url-loader file-loader --save-dev --registry=http://registry.npm.taobao.org,而後添加處理圖片的loader

{
        /*
        css-loader引用的圖片和字體一樣會匹配到這裏的test條件
        */
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        /*
        使用url-loader, 它接受一個limit參數, 單位爲字節(byte)

        當文件體積小於limit時, url-loader把文件轉爲Data URI的格式內聯到引用的地方
        當文件大於limit時, url-loader會調用file-loader, 把文件儲存到輸出目錄, 並把引用的文件路徑改寫成輸出後的路徑
        */
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      },

而後沒講的是css的autoprefix功能，直接用你的編輯器快速補全吧，很方便的

其餘功能

使用webpack2 自帶的處理es6

{
  "babel": {
    "presets": [
      [
        "latest",
        {
          "es2015": {
            "loose": true,
            "modules": false
          }
        }
      ]
    ]
  }

使用後運行webpack能夠發現bundle文件的行數會變小不少

使用自帶的壓縮js代碼

plugins: [
    //這個使用uglifyJs壓縮你的js代碼，僅限生產環境，不然sourcemap找不到
    new webpack.optimize.UglifyJsPlugin({minimize: true})
  ]

能夠看到這裏使用了一個新的名詞,plugins,就是一旦使用插件類的，都須要在plugins來寫，不少寫插件的話須要聲明一個webpack。
在配置文件的最上面來寫
var webpack = require('webpack');;

使用三方庫好比jquery

`npm install jquery --save-dev --registry=http://registry.npm.taobao.org`
    plugins: [
    ...
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery"
        })
    ...
    ]

分離第三方庫

這個時候會發現咱們的bundle.js文件超級大，由於jquery也被打進去了,因此咱們須要作拆分工做，把咱們引用的三方庫給分離出來。

entry: {
    app: APP_PATH,
    //添加要打包在vendors裏面的庫
    vendors: ['jquery']
  },
  //輸出的文件名 合併之後的js會命名爲bundle.js
  output: {
    path: BUILD_PATH,
    filename: '[name].js'
  },
  plugins: [
    ...
        new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors']
         })
    ...
    ]

再手動把html引用的script給換掉就能夠了。

使用source-map

好多模式，該用哪一個，開發用cheap-module-eval-source-map這個絕大多數狀況下都會是最好的選擇，這也是下版本 webpack 的默認選項。不方便看的話就直接source-map,就是文件大點

生產

創建生產配置文件webpack.production.config.js,而後去掉dev的配置，寫進package.json裏"build": "webpack --progress --profile --colors --config webpack.production.config.js",運行npm run build便可

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。