webpack打包器

https://www.webpackjs.com/guides/getting-started/

 

 

webpack

 

概念：模塊化打包器
 
做用：
 
    1.將瀏覽器不識別的語法 轉換成瀏覽器識別的語法
    eg:typeScript    scass    less    等css預處理器。
    2.模塊化，將複雜的程序細化爲小的文件
 
    還能夠：
    css解析，js解析，img解析，html壓縮，代碼合併。gulp所能作的webpack都能作。
 
 
工做流程：
 
把你的項目當作一個總體，經過一個給定的文件（入口文件index.js），webpack找個這個入口文件所依賴的全部文件 經過loader進行打包，打包成一個或者多個瀏覽器可識別的js文件
 
loader 第三方包，處理各類模塊
處理不一樣的模塊，用不一樣的loader

webpack vs gulp 區別

 

沒有可比性
 
webpack是模塊打包機（功能更多）
    
 
gulp是前端自動化工具
    主要作項目的部署工做

 

使用流程

（手動搭建項目的流程），僅適合4.0如下打包方式。4.0以上不適合

1、全局安裝webpack（安裝一次便可）
cnpm install webpack@3.5.3 -g
 
2、建立文件夾 並初始化文件夾
npm init -y
 
3、局部安裝webpack
cnpm install webpack@3.5.3 --save-dev
 
4、建立 webpack.config.js文件
 
5、建立 src入口文件夾 dist出口文件夾
    本身建立入口文件：src/index.js
 
6、安裝處理css的loader
 
cnpm install --save-dev style-loader css-loader sass-loader node-sass
 
7、處理js的loader
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
 
8、插件（幫咱們生成html模板，同時幫咱們自動引入你想引入的文件）
cnpm install html-webpack-plugin --save-dev
 
9、熱更新 服務器（必定要寫準版本號）
cnpm install webpack-dev-server@2 --save-dev
 
在page.json的scripts中自定義運行的命令，（npm run dev）會自動打開瀏覽器
"dev":"webpack-dev-server --open",
 
含義：經過webpack啓服務，webpack會默認找到src/的文件，--open會自動打開瀏覽器
 
webpack.config.js

 

//手動配置webpack

 

/*

_dirname:當前文件夾的絕對路徑(f:\0react\react\day01\demo)

 

path.join()將第一個參數和第二個參數進行鏈接(f:\0react\react\day01\demo.\src\index.js)

 

*/

 

//引入node的核心模塊
const path = require("path");
 
//引入模板
const HtmlWebpackPlugin = require ("html-webpack-plugin");
 
 
//配置路徑（下面會用到）
const PATH = {
    app:path.join(__dirname,"./src/index.js"),//入口文件路徑
    build:path.join(__dirname,"./dist")//出口文件路徑
}
 
 
//下面的代碼都是webpack的配置項，module.exports：是node中內置的一個導出模塊的方法
 
module.exports = {
    //入口文件
    entry:{
        //這裏面的key值決定了下面name的名字叫什麼
        app:PATH.app,
    },
 
    //出口文件
    output:{
        filename:"[name].js",//app.js
        path:PATH.build//出口文件路徑
    },
 
    //對模塊的處理,用loader進行處理（對瀏覽器不識別的語法進行處理，eg:es6,.vue文件，.react文件等等都要在module中進行處理），將模塊進行打包
    module:{
        rules:[
            {
                //若是有.js文件，用下面的loader進行處理
                test:/\.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        //若是在.js文件中遇到了es6代碼，則用@babel/env進行處理，若是遇到了react代碼，則用@babel/react進行處理
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                //若是有.css文件或者.scss文件，則用下面的loadr進行處理
                test:/\.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]//loader的執行順序是從下至上，從右至左
                //eg:若是遇到了sass文件，則先執行scss-loader文件，而後在向左執行
 
            }
            //loader是第三方的包，要進行下載
        ]
    },
 
 
    //webpack全部的插件使用位置
    plugins:[
        new HtmlWebpackPlugin({
            //出口的index.html文件
            filename:"index.html",//當前webpack會根據（下面的）模板生成index.html文件（該index.html文件在dist文件夾中，爲出口文件，打包後會自動生成）
            //模板文件
            template:"./index.html",
            //./index.html爲本身在根目錄下建立的模板文件（本身手動建立的模板文件，在項目根目錄下）
 
            //數據和模板進行結合
            title:"笑笑笑",
            arr:["李湘","王楠","張三"]
        })
    ]
}