手動搭建一個webpack項目

1、概念

首先咱們要理解什麼是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。由瀏覽器加載

重點是瞭解四個核心概念：輸入，輸出，加載程序和插件

2、安裝

全局安裝：

npm install webpack webpack-cli webpack-dev-server –g

依賴安裝：

npm install webpack webpack-cli webpack-dev-server --save-dev

3、建立

Js模塊建立，模塊化開發－模塊接收暴露

這裏須要知道的是：(es5和es6寫法上的不一樣)
eg:
a.Js 暴露模塊 module.exports=obj; || export default obj;
b.Js 接收模塊，設置html須要功能 require(‘./xx.js) || import obj from ‘./xx.js’

打包輸出文件

webpack 輸入文件.js -o 輸出文件.js --mode development (開發環境build)

webpack main.js -o output.js --mode production(生產環境build)

4、基本配置

webpack.config.js

var path = require('path');
module.exports = {
mode: 'development',          //開發模式
entry: './main.js',           //入口文件
output: {                     //出口文件
path: path.resolve(__dirname, 'dist'),    //路徑
filename: 'output.js'                //名字
}};
複製代碼

配置好後終端輸入webpack運行

再安裝一下熱更新省事 熱更新：npm install webpack-dev-server –g

var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}};
複製代碼

運行終端命令webpack-dev-server --hot --line完成自動刷新

若是默認端口被佔用，改端口webpack-dev-server --port 3000 (將默認端口改爲3000) 運行命令更改：在package.json中scripts添加：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "npm run dev",
    "dev":"webpack-dev-server"
  },
複製代碼

則npm start運行

剩餘css、img、js、es六、ts的loader自尋查找webpack官網
www.webpackjs.com