前端工程化webpack（一）

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 要表示 當前路徑 要 用 一個   '/'   表示(筆者也是初學 這點 東西試了一夜。。。然而這個屬性並不過重要)