webpack之傻瓜式教程及前端自動化入門

時間 2019-11-08

原文原文鏈接

對於webpack的概念、用途、好處等等一概省略，想了解的上網搜索便可，這裏直接演示如何新建一個webpack的實例。javascript

一、安裝好nodejs，安裝過程網上找。css

二、在D盤、E盤或任意一個磁盤中新建文件夾，命名爲webpack_demo：html

三、在webpack_demo文件下按住Shift鍵後點擊鼠標右鍵，再左鍵點擊「在此處打開命令行窗口」：java

在打開的命令行窗口中鍵入：node

npm init

name表示項目名，version表示版本等等，不一一贅述了，看字段很容易明白，一一填完或直接一路按回車鍵，最後出現「is this ok？」時，敲擊回車鍵後webpack_demo的文件夾下便生成了package.json文件。jquery

四、在命令行中分別執行如下命令，安裝對應的插件（--save-dev做用是安裝的插件的同時，將插件名寫入package.json的devDependencies列表中）：webpack

npm install webpack --save-dev

npm install jquery --save-dev

npm install style-loader css-loader --save-dev

npm install extract-text-webpack-plugin –-save-dev

安裝完成後package.json的代碼以下（name、version、description等都是在npm init步驟中手動添加而成）：css3

{

　　"name": "webpackdemo",
　　"version": "1.0.0",
　　"description": "a webpack demo",
　　"main": "index.js",
　　"scripts": {
　　　　"test": "echo \"Error: no test specified\" && exit 1"
　　},
　　"author": "liqiyuan",
　　"license": "ISC",
　　"devDependencies": {
　　　　"css-loader": "^0.26.1",
　　　　"extract-text-webpack-plugin": "^1.0.1",
　　　　"jquery": "^3.1.1",
　　　　"style-loader": "^0.13.1",
　　　　"webpack": "^1.14.0"
　　}
}

五、此時查看webpack_demo文件夾，會發現多出了一個文件夾：git

雙擊打開，文件夾下的內容以下：es6

說明所須要的插件都已安裝成功。

六、在webpack_demo文件下新建文件webpack.config.js：

編輯代碼以下：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
　　entry: './js/main.js',
　　output: {
　　　　path: './dist',
　　　　filename: 'bundle.js'
　　},

　　plugins: [
　　　　new ExtractTextPlugin('./style.css')
　　],
　　module: {
　　　　//加載器配置
　　　　loaders: [
　　　　　　{ 
　　　　　　　　test: /\.css$/, 
　　　　　　　　loader:ExtractTextPlugin.extract("style-loader","css-loader")
　　　　　　}
　　　　　　// { 
　　　　　　　　// test: /\.(png|jpg)$/,
　　　　　　　　// loader: 'url-loader?limit=8192'
　　　　　　// }
　　　　]
　　}
};

以上代碼的意思是：

引入extract-text-webpack-plugin這個插件（用於支持打包css文件，默認只支持打包js文件），讀取當前目錄下js文件夾中的main.js（入口文件）內容，把對應的js和css文件打包，打包後的文件放入當前目錄的dist文件夾下，打包後的css文件命名爲style.css，打包後的js文件名爲bundle.js。

七、webpack_demo下新建js文件夾，裏面新建main.js，代碼編輯以下：

require('./index/index.js');
require('./index/index2.js');

require('../css/index/index1.css');
require('../css/index/index2.css');
require('../css/common/public.css');

以上代碼意思爲：引入當前目錄index文件夾下的index.js，index2.js，引入上一層目錄css文件夾下index文件下的index1.css，index2.css和common文件夾下的public.css。

八、新建上一步中對應路徑的css、js、index、common文件夾，裏面分別新建對應的css或js文件，每一個css、js文件裏寫入不一樣的代碼。

九、窗口命令行中執行代碼：

webpack

出現以下提示索命打包成功：

此時打開webpack_demo文件夾，發現多了dist文件夾，打開，裏面文件以下：

十、新建一個index.html文件，只引入bundle.js和style.css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack教程</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"/>
    <link rel="stylesheet" type="text/css" href="./dist/style.css">
</head>
<body>

　　<div>webpack</div>

<script src="./dist/bundle.js"></script>
</body>
</html>

雙擊用瀏覽器打開這個html，會發現入口文件main.js裏面引入的全部js和css文件都已經執行了。

---------------------------------------------- 我是分割線----------------------------------------------

上邊是webpack的基本用法，可見它的基本做用是把一堆js和css壓縮成一個js和css，但其實它的用法遠不只如此，這裏再說兩個常見的用法：

一、自動加css3前綴。

咱們在寫一些css3的樣式時，爲了良好的兼容性，每每會把css3代碼寫成以下這個樣子：

.test{
　　display: flex;
　　display: -webkit-box;
　　display: -ms-flexbox;
}

若是每一個css3的代碼都要手動寫一堆前綴，那不只要奔潰還容易出錯，這種事情仍是交給工具來幹，會效率和靠譜的多。

二、ES6轉碼。

ES6將會是之後的趨勢了，但兼容性不好，轉碼後兼容性就大大提升了。

下面經過另外一個小demo，把這一串東西給跑起來。

demo示例文件結構以下：

文件目錄結構就不畫圖了，文字說明：

　　app：開發文件（編譯前的文件）

　　　　css：手動編寫的css文件集

　　　　　　css-entry.js：css入口文件，即說明須要打包哪些css文件

　　　　　　index.css：css示例文件1

　　　　　　index2.css：css示例文件2

　　　　js：手動編寫的js文件集

　　　　　　index.js：js示例文件1

　　　　　　index.js：js示例文件2

　　dist：生產文件（編譯後的文件）

　　　　css：編譯後生成的css文件集

　　　　　　bundle.css：編譯後生成的css文件，可直接引入使用

　　　　　　css.js：編譯後生成的另外一種css文件的用法，可先無論

　　　　js：編譯後生成的jss文件集

　　　　　　bundle.js：編譯後生成的js文件，可直接引入使用

　　node_modules：webpack自動安裝的各依賴包，不用管

　　package,json：配置文件，主要告訴電腦須要安裝哪些依賴包

　　postcss.config.js：css3自動添加前綴的配置文件

　　webpack.config.js：webpack的配置文件

這個是什麼意思呢，就是咱們把本身寫好的代碼分別放進app的css和js文件夾裏，打包之後，webpack會自動的將代碼進行添加css3前綴、打包壓縮、ES6轉碼等所有搞定後，將處理好的代碼文件生成在dist的css和js裏，咱們在html裏直接引用處理好之後的代碼就行。

demo實戰：

一、按上邊的目錄結構一一將文件新建好，node_modules除外。

二、編寫package.json，寫明須要安裝哪些依賴包，這些依賴包分別是幹嗎的不一一說明了，想了解詳細的能夠直接複製依賴包名稱去百度上搜。

 
        { 
       
        "name" 
        :  
        "webpack" 
        , 
       
        "version" 
        :  
        "1.0.0" 
        , 
       
        "description" 
        :  
        "webpack, es6, css autoprefixer" 
        , 
       
        "author" 
        :  
        "liqiyuan" 
        , 
       
        "license" 
        :  
        "ISC" 
        , 
       
        "devDependencies" 
        : { 
       
        "autoprefixer" 
        :  
        "^7.1.1" 
        , 
       
        "babel-core" 
        :  
        "^6.24.1" 
        , 
       
        "babel-loader" 
        :  
        "^7.0.0" 
        , 
       
        "babel-polyfill" 
        :  
        "^6.23.0" 
        , 
       
        "babel-preset-env" 
        :  
        "^1.6.1" 
        , 
       
        "css-loader" 
        :  
        "^0.28.1" 
        , 
       
        "extract-text-webpack-plugin" 
        :  
        "^2.1.0" 
        , 
       
        "postcss-loader" 
        :  
        "^2.0.5" 
        , 
       
        "style-loader" 
        :  
        "^0.17.0" 
        , 
       
        "webpack" 
        :  
        "^2.5.1" 
       
        } 
       
        }

三、編寫webpack.config.js

 
        // ES6轉碼和打包打包 
       
        // module.exports = { 
       
        //     entry: [ 
       
        //         'babel-polyfill',        // 添加了這個東西，才能完美的將ES6轉碼 
       
        //         './app/js/index.js',     // 進行轉碼的js文件1 
       
        //         './app/js/index2.js',    // 進行轉碼的js文件2 
       
        //     ], 
       
        //     output: { 
       
        //         path: __dirname + '/dist/js',    // 編譯後的js文件輸出目錄 
       
        //         filename: 'bundle.js'            // 編譯後的js文件名 
       
        //     }, 
       
        //     module: { 
       
        //         loaders: [ 
       
        //             { 
       
        //                 test: /\.jsx?$/, 
       
        //                 loader: 'babel-loader',     // 'babel-loader'也可寫成'babel' 
       
        //                 query: { 
       
        //                     presets: ['env'] 
       
        //                 } 
       
        //             } 
       
        //         ] 
       
        //     } 
       
        // }; 
       
        // CSS自動添加前綴並打包 
       
        const ExtractTextPlugin = require( 
        "extract-text-webpack-plugin" 
        ); 
       
        const extractCSS =  
        new  
        ExtractTextPlugin({ 
       
        filename:  
        './bundle.css' 
        ,        
        // 編譯後生成的css文件名 
       
        disable:  
        false 
        , 
       
        allChunks:  
        true 
       
        }); 
       
        module.exports = { 
       
        entry: { 
       
        app: [ 
        './app/css/css-entry.js' 
        ],     
        // 須要進行打包處理的css入口文件 
       
        }, 
       
        output: { 
       
        path: __dirname +  
        '/dist/css' 
        ,       
        // 編譯後生成的css文件輸出目錄 
       
        filename:  
        'css.js' 
       
        }, 
       
        module: { 
       
        rules: [ 
       
        { 
       
        test: /\.css$/, 
       
        use: extractCSS.extract({ 
       
        fallback:  
        "style-loader" 
        , 
       
        use: [ 
        'css-loader' 
        ,  
        'postcss-loader' 
        ] 
       
        }) 
       
        } 
       
        ] 
       
        }, 
       
        plugins: [ 
       
        extractCSS 
       
        ] 
       
        }

四、根目錄下打開命令行窗口，輸入「cnpm install」，便可按照package.json的配置內容自動安裝所需插件（使用cnpm以前要先把淘寶鏡像安裝一下：npm install -g cnpm --registry=https://registry.npm.taobao.org），否則就用「npm install」。安裝完成後，根目錄下會生成一個文件夾node_modules，這就是安裝好的依賴包。

五、編輯postcss.config.js，這是css3自動添加前綴所須要的配置文件

 
        module.exports = { 
       
        plugins: [ 
       
        require( 
        'autoprefixer' 
        )({browsers:[ 
        'last 5 versions' 
        ]}) 
       
        ] 
       
        }

六、編輯app/css下面的css文件

index.css（css示例文件1）

index2.css（css示例文件2）

css-entry.js（css入口文件，即說明須要打包哪些css文件）

 
        require( 
        './index.css' 
        ); 
       
        require( 
        './index2.css' 
        );

七、命令行中輸入「webpack」。

八、神奇的狀況發生，根目錄下會生成dist文件夾，dist下有css文件夾，css下有bundle.css，打開bundle.css：

發現木有，原本index.css和index2.css裏的css3代碼是沒有加任何前綴的，打包之後css3前綴都已經給加好了。

九、打包js文件和es6轉碼：編輯app/js目錄下的index.js和index2.js，寫上es6代碼。再打開配置文件webpack.config.js，將 "ES6轉碼和打包" 部分代碼放開，將 "CSS自動添加前綴並打包" 部分代碼註釋掉，命令行裏敲擊 "webpack"，打包完成後能夠看見dist/js目錄下會生成一個bundle.js的文件，裏面正是被打包和轉碼好的js代碼，可完美被IE9及以上的瀏覽器支持。

附上此例子的giuhub地址：https://github.com/Leeqly/webpack-es6-autoprefixer

可前往下載，而後直接cnpm install安裝好依賴包後就可使用了。

順便提一下webpack幾個經常使用命令

webpack：普通打包

webpack -p：壓縮打包

webpack -p -w：監聽全部須要打包的代碼，只要有代碼被改動並保存後，就會自動進行打包