webpack1.X 漸進教程(一)

時間 2019-11-06

標籤 webpack1.x webpack 漸進教程简体版

原文原文鏈接

1. 安裝webpack

npm Install webpack －g
（－g 表明全局安裝，這樣就不用每一個使用webpack的項目都在當前項目中再安裝一遍了。）css

2.初步使用

如今咱們不用任何config文件（瞭解下過程，項目中確定不會這麼用），可是要有一個你想要編譯的文件，好比一個js文件，一張圖片，一個sass文件。
下面咱們來release一個js文件(test.js，這個文件裏只寫一句：):html

// test.js

alert('hellow world')

用法：webpack 入口文件目標地址
使用：webpack ./test.js ./dist/bundle.jsvue

而後你去look一下./dist/bundle.js這個文件的內容，不要care是否看的懂，just一句一句的看兩邊。node

3.使用配置文件

webpack ./test.js ./dist/bundle.js 這樣的usage體驗確定是很差的，這時候就該配置文件登場了:webpack.config.js,這是webpack默認的配置文件名，固然你也能夠修改，這個後面再講。jquery

:webpack

// webpack.config.js
// 這裏展現了最最基本的配置

module.exports = {
     entry: './test.js',
     output: {
         path: './dist',
         // filename: '[name]-[chunkhash:8].bundle.js',
         // filename: '[name]-[hash].bundle.js', 下面有解釋 chunkhash 和 hash 的區別
         filename: 'bundle.js',
     },
     module: {
         // loaders
     },
     plugins: [
        // plugins
     ]
 }

chunkhash:當前「代碼塊」（chunk）的hash值，也能夠理解爲是代碼塊內容的md5值，若是代碼沒有修改，這個值是不會改變的；不然一概改變。
hash:webpack本次編譯的hash值,任何一個文件的改變都會有新的hash生成。es6

contenthash:指根據當前文件的內容計算md5。可是require進來的內容改變也會引發它的改變。
以上3個值都沒法很好的知足現實開發中的需求，由於咱們想要的是：咱們打開某個編譯好的文件，若是它自己的內容有所改變（不包括require進來的文件：css，image等），纔去計算新的md5值。
這裏推薦一片文章講的很清楚：Webpack中hash與chunkhash的區別，以及js與css的hash指紋解耦方案，文中提到的webpack-md5-hash是個很好的選擇。(補充：webpack-md5-hash有坑，勿入！坑：vendor引用了修改的chunk，但vendor的hahs並不會改變！)web

其中的module:{}和plugin:[]先忽略無論，下面很快就會講到。
Now,咱們有了配置文件，執行命令變得simple多了：
webpack
就這麼一個單詞，webpack會去配置文件裏找入口文件 and 目標地址。npm

4.ES6 or Sass or React or Vue

可能再項目裏用到了es6，或者sass，less等現階段瀏覽器不能識別的語言；或者你的文件是.jsxor.vue,這些文件裏可能包含了HTML,CSS,SASS,ES6等等瀏覽器或者你的應用所運行的環境，可是這些環境不能識別這些文件or語法or語言，這個時候就須要先將它們編譯成可以被識別並執行的語言or語法。瀏覽器

Now,讓webpack中的主角loader登場。loader中文就是裝載器，好比把es6裝進es6-loader(這是一個假名字)中，過一下子，es6－loader裏面的es6就變成es5 or es3 了。
注意：loader相關的配置都寫在上面提到的module:{}中。具體用法以下：

ES6
加載器：babel-loader

用法：先安裝npm install babel-loader --save-dev(若是報錯，那麼就根據提示缺什麼 install 什麼，好比babel-core等)
詳細用法

module: {
    loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
}

再加一個sass-loader

Sass
加載器：babel-loader

用法：先安裝npm install sass-loader --save-dev(若是報錯，那麼就根據提示缺什麼 install 什麼,好比：node-sass,它不是一個loader，可是sass-loader依賴它。)詳細用法

// ...
module: {
    loaders: [{
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    },
    
    {
        test: /\.scss/,
        exclude: /node_modules/,
        loader: 'sass-loader'
    }]
}
// ...

5.更多用法

Now,咱們還剩一個plugins:[]。
如今咱們有一個需求，剛纔咱們編譯好的bundle.js文件要引入到咱們的某個.html文件中進行使用。可是若是咱們像上面配置的那樣加了hash值：[name]-[hash].bundle.js,文件名會因爲文件內容的變化而變化，咱們總不能 again and again 地修改html文件中的引用路徑吧～So,找個插件來幫忙吧:html-webpack-plugin.

html-webpack-plugin
插件：同樣要先安裝npm install html-webpack-plugin --save-dev

用法：

var HtmlWebpackPlugin = require('html-webpack-plugin');

// ...
plugins: [
    new HtmlWebpackPlugin({
        // <title>個人webpack</title>
        title:"個人webpack",
        // [name]-[hash].bundle.js要寫入的html文件路徑
        // 默認根路徑是： output.path ， 默認文件名是： index.html(eg：./dist/index.html)
        filename: './index.html',
        // template: './myIndex.html' 下面會講到
    })
]
// ...

上面的配置會將output輸出的文件bundle.js自動引入到./dist/index.html文件中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--這裏就是 HtmlWebpackPlugin的功勞-->
    <title>個人webpack</title>
  </head>
  <body>
  <!--這裏就是 HtmlWebpackPlugin的功勞-->
    <script src="bundle.js"></script> 
  </body>
</html>

上面這個index.html是HtmlWebpackPlugin的功勞本身生成的，全部的內容都須要在new HtmlWebpackPlugin({})中配置好（詳細配置說明）。可是，多數狀況下，咱們會有本身index.html or myIndex.html,這些文件是咱們已經添加了樣式或者插入了其它代碼。這時候template就派上用場了。咱們本身的myIndex.html須要是這樣的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 注意這裏的語法，固然你也能夠將title寫死在這裏，這樣配置文件中的title便不會起做用！ -->
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    </body>
</html>

生成的文件是這樣的：

<html>
    <head>
        <meta charset="utf-8">
        <title>個人webpack</title>
        <link rel="stylesheet" href="style.css">
        <style media="screen">
            .body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
    <script src="other.js"></script>
    <script src="bundle.js"></script>
    </body>
</html>

webpack自帶的和社區貢獻的有不少優秀的插件，好比項目中會用到不支持AMD或者CommonJS的js庫，webpack.ProvidePlugin(webpack自帶的)妥妥的幫我解決這個問題：

// ...
plugins: [
    new HtmlWebpackPlugin({
        filename: './dist/index.html'
    }),
    //就能夠屁顛屁顛的這麼使用了：import $ from 'jquery'
    // 注意：你得先在某處引用jquery.js
    // 必入index.html中：<script src="jquery.js"></script>
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
  
  // ...

相關標籤/搜索

webpack1.x+typescript

每日一句

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