Webpack初步使用

前端使用vue時使用webpack打包工具：注意使用webpack打包工具時，不建議在html文件中引入任何其餘文件
1.新建文件夾，在文件夾下建立目錄
|--dist
|--src
    |--css
    |--js
    |--img
    |--index.html
    |--main.js    //這個是全部的Js文件的入口
|--webpack.config.js    //這個是配置文件    

//以上文件建立完成以後
在webpack.config.js配置信息：
const path = require('path')
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口，這裏表示webpack要打包哪一個文件
    output:{
        path:path.join(__dirname,'./dist'),//出口，表示webpack打包完後將文件輸出到哪一個目錄
        filename:'bundle.js'//這是指定輸出的文件的名稱
    }
}

//若須要用到jquery，則在main.js文件中使用import方式導入
在main.js中配置
*import $ from 'jquery'
完成以後須要在npm中下載此依賴,下載方式：npm i jquery -s 
下載完成以後，項目中會多出node_modules目錄

//接着須要安裝webpack打包工具，4.0以上版本還須要安裝webpack-cli工具
*安裝方式：cnpm i webpack -D  以及  cnpm i webpack-cli -D (雖然全局已經安裝過webpack,可是在項目中仍是須要安裝此工具)
此時項目中會多出:package.json文件

//以上方式若咱們有修改文件，咱們每次更新都須要從新打包，因此爲了減小沒必要要的打包操做，則引入自動打包工具webpack-dev-server
*安裝方式：cnpm i webpack-dev-server -D
安裝完成以後須要配置一些信息使其能夠自動打包編譯
在package.json文件中配置：--open：項目啓動後自動打開瀏覽器   --port 3000：設置項目端口  --contentBase src：項目在瀏覽器中默認打開的文件文字  --hot：熱更新
{
  "scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }
}
配置完後則能夠經過命令：npm run dev 啓動項目

//接着咱們還能夠把html文件放入內存中，首先須要安裝html-webpack-plugin工具
*安裝方式：cnpm i html-webpack-plugin -D
安裝完成以後須要在webpack.config.js中導入此工具
const htmlWebpackPlugin = require('html-webpack-plugin')
而後再配置其相關信息
//配置
module.exports = {
    plugins:[//配置插件的節點
        new htmlWebpackPlugin({    //建立一個在內存中生成html頁面的插件
            template:path.join(__dirname,'./src/index.html'),//指定模板頁面，未來會將此路徑的頁面在內存中去生成
            filename:'index.html'//指定生成頁面的名稱
        })
    ]
}

//樣式文件的引入，因爲webpack默認只能打包處理Js類型的文件，沒法處理其餘非Js類型的文件，因此須要咱們手動的去設置匹配規則
*安裝第三方加載器：cnpm i style-loader css-loader -D
安裝完成以後在main.js中用import方式引入css文件
import './css/index.css'
而後在webpack.config.js配置文件中進行配置：
//配置
module.exports = {    
    module:{//全部第三方模塊加載器
        rules:[//全部第三方模塊的匹配規則，test表示正則的test()方法
            {test:/\.css$/,use:['style-loader','css-loader']}//css文件的第三方loader規則
        ]
    }
}