媒介

scss（sass）、less是css的預處置懲罰言語，採納其能夠獲得更範例，更清楚的css代碼，typescript是javascript基礎上擴大的代碼，使我們能運用javascript不能運用的特徵，而且能夠轉換為js代碼

但這些言語編寫的代碼都需舉行處置懲罰才變成瀏覽器能辨認的代碼，手動處置懲罰又太甚煩瑣，所以運用webpack等自動打包東西就比較輕易

1、簡介

Webpack : 是前端打包東西，它從主文件（如index.html）最先，搜檢其依靠的模塊文件，並將个中JavaScript模塊以及別的的一些瀏覽器不能直接運轉的拓展言語（Scss，TypeScript等）舉行轉換和打包成為一個（或多個）js文件
Grunt/Guip : 優化前端開闢流程的東西，在一個設置文件中設置指定文件的編譯，組合，緊縮等使命的詳細步驟，東西自動完成該使命

2、裝置Webpack

運用npm裝置webpack模塊，在webpack 3中，webpack自身和它的CLI之前都是在同一個包中，但在第4版中，他們已將二者分開來更好地治理它們,所以在webpack 4中須要先全局裝置webpack和webpack-cli。
運用npm裝置webpack模塊:

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

3、運用webpack打包項目入門

1、運用終端用webpack打包簡樸文件
webpack 4不能運用webpack 進口文件 出個文件 舉行打包了，它的打包體式格局為默許進口文件是src目次下的Index.js文件，目標文件是dist目次下的main.js文件，打包敕令行是,實行該敕令行以後就能在dist目次下湧現打包完成的文件main.js

webpack --mode development

2、運用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)