Webpack基礎-3

webpack（前端項目構架工具）

• JS (.js .coffee .ts)
• CSS(.css .less .sass .scss stylus)
• image(.jpg .png .gif .bmp .avg)
• 字體文件（.svg .ttf .eot .woff .woff2)
• 模板文件（.ejs .jade .vue ）

1. 合併、壓縮（精靈圖、圖片的base64編碼）
2. 使用requireJS或webpack（基於整個項目構建）
3. 使用Gulp，基於task任務

node中

// let webpack = require('webpack') //啓用熱更新第二步
const $ = require('jquery')
const path = require('path')
module.exports = {
  // 入口，表示要使用哪個webpack打包哪個文件
entry:  path.join(__dirname,'url'),
// 輸出文件相關配置
path: path.join(__dirname,''),
//  指定輸出文件名稱
filename: 'bundle.js',
devServer:{
        // open:true,
        // port:3000,
        // contentBase:'./src',
        // hot: true, //啓用熱更新第一步
    },//開發服務器
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//用來處理css的第三代模塊,處理順序，從後向前
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//用來處理less文件的第三方模塊
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|jpeg|png|gif|bmp)$/,use:'url-loader?limit=30000&name=[hash:8]-[name].[ext]'},//處理圖片路徑的loader
            // limit 給定的值，是圖片的大小，單位是byte，如果我們引用的圖片大於這個大小，則不會轉爲base64編碼，如果小於這個大小，則會轉爲base64編碼
            // name=[name].[ext]表示名字後綴不變,name=[hash:8]-[name].[ext]前面有8爲哈希值
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//處理字體文件loader
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//配置babel來轉化高級的ES語法
            {test:/\.vue$/,use:'vue-loader'},//處理vue的loader
        ],//所有的匹配規則
    },//模塊配置（用於配置所有的第三方模塊加載器）
    plugins:[
        // new webpack.HotModuleReplacementPlugin()//啓用熱更新第三步，一個熱更新的模塊對象
        new htmlWebpackPlugin({ // 創建一個在內存彙總生成html頁面的插件
            template:path.resolve('./src/index.html'),//指定模板頁面,
            filename:'index.html',//指定生成頁面的名稱
        }),
        new VueLoaderPlugin(),
    ],//插件
    mode:'development',//開發者模式
    resolve:{
        // alias:{
        //     "vue$":"vue/dist/vue.js",//設置vue被導入時的路徑
        // }
    },//配置解析
}

es6

import $ from 'jquery'

在vs code安裝

• vscode-icons

webpack監聽代碼改變自動編譯

• 安裝前必須先安裝webpack，安裝webpack-dev-server工具，實現自動打包編譯

npm i webpack-dev-server -D

• 使用npm run dev
  在package.json文件中添加

“dev”: “webpack-dev-server”

• webpack-dev-server幫我們打包生成的bundle.js文件，並沒有放在實際的物理磁盤上,而是託管到電腦內存中。可認爲與dist、src、node_modules平級
  
  
  node ->nodemon
  webpack->webpack-dev-server

常用的命令參數

–hot：熱更新
–open：打開頁面
–port 3000：用3000端口
–contentBase src：設置根路徑

• webpack中帶s基本都是數組，除export之外
• vue就比較反人類
  全局不帶s，組件中帶s
  filters
  directives
  components
  methods

props