還不打算去認識一下webpack?

時間  2019-11-09
標籤 不打 算去 認識 一下 webpack 简体版
原文   原文鏈接

前言

隨我來,去看看webpack!( 爲時未晚) ============》初版(較淺顯的知識,懂得可忽略本文)

方向

  1. 安裝,起步搭建運行. (粗略代過)
  2. 對於資源的管理,對於輸出的管理. (舉例介紹)
  3. 本地開發 (基礎服務)
  4. 熱更新=[模塊熱替換] (初步認識)

1.初步構建

mkdir webpack_demo && cd webpack_demo   // 新建一個文件 並進入更目錄 `mkdir 是linux命令`
npm init -y   // 初始一個packjage.json文件  -y 表示跳過詢問步驟...


//安裝webpack
npm install webpack --save-dev  // 添加webpack-cli依賴到"devDependencies"
//webpack4.0+ 須要安裝webpack-cli
 npm install webpack-cli --save-dev  // 添加webpack-cli依賴到"devDependencies"
//生成以下目錄
├── package.json                                       
├── src                                       //源目錄(輸入目錄)
│   ├── index.js                                    
├── dist                                         // 輸出目錄
│   ├── index.html
// 修改 `dist/index.html`
< !DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>webpack_demo</title>
    </head>
    <body>
            <script src="main.js"></script>   //爲何是main.js下面會解釋
    </body>
</html>

//修改`src/index.js    `
 function component() {
   var element = document.createElement('div');
     element.innerHTML = "整一個盒子"
     return element;
  }

  document.body.appendChild(component());
npx webpack (Node 8.2+ 版本提供的 npx 命令)
node node_modules/.bin/webpack (8.2-版本)
會將咱們的腳本做爲入口起點，而後 輸出 爲 main.js.
打開dist/index.html 你將會看到 整一個盒子 幾個字樣~

2.資源管理,輸出管理.基本開發起步

//生成以下目錄
  ├── package.json 
+ |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
  │   ├── index.js                                    
  ├── dist                                       // 輸出目錄
  │   ├── index.html
先介紹一個 Lodash庫 它是一個 一致性、模塊化、高性能的 JavaScript 實用工具庫 模塊化處理很是適合 值操做和檢測( 說白了就是webpack用了我也試試...)
lodash相關文檔

npm install lodash --save //非僅在開發的時候使用的依賴 就是須要打包到生產環境的包 不加-devcss

// src/index.js
import _ from 'lodash';

function component() {
   var element = document.createElement('div');
     element.innerHTML = _.join(['lodash','webpack'],'');   //join將 array 中的全部元素轉換爲由''分隔的字符串 其它函數能夠本身實踐
     return element;
 }
打開index頁面輸出 loadshwebpack 
//webpack.config.js
 const path = require('path');
 
 module.exports = {
      entry: './src/index.js',   //入口
      output: {  //出口
        filename: 'main.js', //打包以後腳本文件名稱
        path: path.resolve(__dirname, 'dist')  //路徑指向執行 js 文件的絕對路徑 此處爲/dist
      }
 };
執行 npx webpack --config webpack.config.js (把以前dist目錄下main.js刪除) 新的腳本生成(其實沒多大變化..) 
//  配置一下package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"     //添加此行命令 下次執行打包就是 npm  run  build 至關於上面的npx webpack --config webpack.config.js
  },

// 資源的配置 css 圖片 js等等.. 舉例 css 圖片
npm install --save-dev style-loader css-loader css的loader
npm install --save-dev file-loader file(圖片)對象的 loader 
//生成以下目錄
   ├── package.json 
 + |── webpack.config.js                          //webpack配置文件                                     
   ├── src                                        //源目錄(輸入目錄)
   │   ├── index.js   
 + │   ├── index.css 
 + │   ├── icon.jpg                                
   ├── dist                                       // 輸出目錄
   │   ├── index.html
//修改webpack.config.js
    const path = require('path');  //path路徑模塊
    module.exports = {
      entry: './src/index.js',   //入口
      output: {   //出口
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
      },
      module: {
         rules: [
           {
             test: /\.css$/,  //檢測正則匹配.css結尾的文件
             use: [           //使用倆個loader
               'style-loader', 
               'css-loader'
             ]
           },
           {
             test: /\.(png|svg|jpg|gif)$/,  //正則匹配.png svg jpg gif結尾的文件
             use: [    //使用file-loader
               'file-loader'
             ]
           }
         ]
       }
    };
 //修改src/index.css
    div{
        color:red;
    }

 //修改src/index.js
     import _ from 'lodash';
     import "./index.css";
     import Icon from './icon.jpg';
    
    
      function component() {
        var element = document.createElement('div');
    
        element.innerHTML = _.join(['loadsh', 'webpack'], ' ');
        var myIcon = new Image();
        myIcon.src = Icon;
    
        element.appendChild(myIcon);
        return element;
      }
    
      document.body.appendChild(component());
npm run build(刪除以前的dist目錄下main.js) 你會看紅字和圖片 以上就是資源管理的簡短介紹
npm install --save-dev html-webpack-plugin 安裝html-webpack-plugin模塊 模塊用到功能:
1： 動態添加每次compile後 js css 的hash
2: 可配置多頁面 單頁面 這些
3： 其它沒涉及到
npm install clean-webpack-plugin --save-dev 清除dist文件夾(每次刪除麻煩了..)配置一下 
//修改目錄
  ├── package.json 
  |── webpack.config.js                          //webpack配置文件                                     
  ├── src                                        //源目錄(輸入目錄)
 +  │   ├── app.js
 +  │   ├── print.js
  │   ├── index.css 
  │   ├── icon.jpg                                   
  ├── dist                                       // 輸出目錄
  │   ├── index.html
//webpack.config.js  ===============================================
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
       new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
       title: 'webpack_demo'
     })
  ],
  module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
     ]
   }
};

//修改src/index.js ===================================================
 import _ from 'lodash';   //引入lodash模塊
 import "./index.css";     // index.css
 import Icon from './icon.jpg';   // 圖片
 import printMe from "./print.js"    // printJS


  function component() {
    var element = document.createElement('div');  //建立一個元素

    element.innerHTML = _.join(['loadsh', 'webpack'], ' ');  // lodash中_.join方法
    var myIcon = new Image(); //建立一個圖片
    myIcon.src = Icon;    //src賦值

    element.appendChild(myIcon);   //追加圖片

    var btn = document.createElement('button');  //建立按鈕
    btn.innerHTML = 'Click me and check the console!';   //內容賦值
    btn.onclick = printMe;   //添加事件
    element.appendChild(btn);   //追加元素

    return element;
  }

  document.body.appendChild(component());   //追加元素到body中
  
  //修改src/print.js  ==========================================
  export default function printMe() {
      console.log('from print.js');
  }
npm run build 會發現基本webpack的配置以後 ,有點模樣(意思)了 打開頁面index.html正常訪問

3.本地開發

npm install --save-dev webpack-dev-server "webpack-dev-server" 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載 
//修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
     contentBase: './dist'
  },
  plugins: [
       new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
       title: 'webpack_demo'
     })
  ],
  module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
     ]
   }
};
//修改package.json
...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open", //start命令
    "build": "webpack"
 },
 ...
npm run start 本地起了8080端口的服務,你也能夠看到本身的頁面

4.熱更新

//修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
     contentBase: './dist',
     hot: true
  },
  plugins: [
       new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
       title: 'webpack_demo'
     }),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
  ],
  module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
     ]
   }
};
npm run start 運行http://localhost:8080/ 而後你去修改print js的console(或者添加其餘代碼) 會發現命令行輸出updated. Recompiling... 字樣 這就是簡單的實現了熱更新

最後

本文只是大概從幾個demo來對於webpack的基礎概念 入口entry 出口 output loader plugins mode(沒有直面涉及)幾大模塊的梳理於實踐,讓你們對於webpack不在那麼陌生!html

後續文章會從更深刻的角度去學習webpack! 暫定下週1 發表文章(內容 詳細介紹hot 實現一個簡易的vue-cli等等)vue

demo的代碼我會同步 github

ps:

第二版 : webpack構建一個簡易的my-vue-cli
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程