webpack 的基本用法

1.app.js 引入模塊

import moduleLog from ‘./module.js‘　　//引入moduleLog從./module.js

2.module.js導出模塊

export default function(){};　　　　　　//導出 function(){}

3.打包

$ webpack app.js dist/bundle.js　　　　　//打包 入口文件app.js  出口文件 ./dist/bundle.js

　　這裏要使用 webpack 這個命令要 $ npm i -g webpack

webpack.config.js的最設置

const path = require(‘path‘);　　//內置模塊  不需要 npm 下載
module.exports 
 
= {
  entry : ‘./app.js‘,　　//入口
  output : {　　　　　　　　//出口
        path : path.join(__dirname,dist),　　//用這種方法  路徑的 分隔符（用\ 還是 /） 不會出錯
        publicPath : ‘./dist‘,　　　　　//path 是用來存放打包後的文件的輸出目錄 
        filename : ‘bundle.js‘　　　　//publicPath 制定資源文件的引用目錄  
  },
}

配置完以上的時候 僅需輸入 webpack 就可以實現打包　　在文件夾中生成實體文件

$ webpack

webpack-dev-server熱加載 　　加在module.export 裏面 這裏開發時要用到 這個模塊 要 $ npm i -D webpack-dev-server

devServer : {
  publicPath : ‘dist‘,　　//輸出 bundle.js 的地方
  port : 3000　　//端口號
},

在配置package.json裏的 script面添加

dev:‘webpack-dev-server‘

執行　　　　　　　　打包後　不生成本地文件 存在內存中

$ npm run dev　　　　//在瀏覽器中 輸入 locallhost：3000進行訪問

　　當設置了 devServer 裏的 publicPath 之後 output 裏面就沒必要設置 Path 和 publicPaht 了 這時 頁面引入的就不是本地文件夾裏面的bundle.js了　　但是 fillename屬性 任然生效 也可以設置 devServer 裏面的 publicPath 來改變 生成目錄 這裏要註意 一點 devServer 裏的 publicPath 要表示 當前路徑 要 用 一個 ‘/‘ 表示(筆者也是初學 這點 東西試了一晚上。。。然而這個屬性並不太重要)

前端工程化webpack（一）