前端構建工具 -- Webpack

前言

scss（sass）、less是css的預處理語言，採用其能夠獲得更規範，更清晰的css代碼，typescript是javascript基礎上擴展的代碼，使咱們能使用javascript不能使用的特性，而且能夠轉換爲js代碼

但這些語言編寫的代碼都需進行處理才能變成瀏覽器能識別的代碼，手動處理又太過繁瑣，因此使用webpack等自動打包工具就比較方便

一、簡介

Webpack : 是前端打包工具，它從主文件（如index.html）開始，檢查其依賴的模塊文件，並將其中JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等）進行轉換和打包成爲一個（或多個）js文件
Grunt/Guip : 優化前端開發流程的工具，在一個配置文件中設置指定文件的編譯，組合，壓縮等任務的具體步驟，工具自動完成該任務

二、安裝Webpack

使用npm安裝webpack模塊，在webpack 3中，webpack自己和它的CLI之前都是在同一個包中，但在第4版中，他們已經將二者分開來更好地管理它們,因此在webpack 4中須要先全局安裝webpack和webpack-cli。
使用npm安裝webpack模塊:

npm install -g webpack
npmt install -g webpack-cli

三、使用webpack打包項目入門

一、使用終端用webpack打包簡單文件
webpack 4不能使用webpack 入口文件 出個文件 進行打包了，它的打包方式爲默認入口文件是src目錄下的Index.js文件，目的文件是dist目錄下的main.js文件，打包命令行是,執行該命令行以後就能在dist目錄下出現打包完成的文件main.js

webpack --mode development

二、使用webpack打包複雜項目
首先新建一個文件夾webpack-demo,其下有文件夾css和js,css文件夾裏有
建立package.json : npm install
安裝依賴包：

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

新建一個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: {
        rules: [
            {
                test: /\.css$/,
                loader:ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    }
};

注：在webpack v2 以後loaders都用rules替代了
使用webpack進行打包webpack
注：若是運行提示 command not found能夠這麼操做node_modules/.bin/webpack
自定義shell命令來操做的。$ alias lwebpack="node_modules/.bin/webpack"

咱們須要在js文件裏，經過require的方式來引入css，咱們來看具體的方法，首先須要安裝css-loader，
style-loader(安裝style-loader的目的是爲了在html中以style的方式嵌入css)