使用webpack構建一個簡單項目

1.確認是否已經安裝NodeJS環境，安裝好的話就會顯示版本號

node -v

npm -v

 

2.安裝 http-server:，方便運行網頁

npm install http-server -g          安裝 http-server

http-server -p 8881                     啓動一個端口號爲8881的http服務（靜態網頁）

 

3.初始化項目  npm init

紅色框框裏是本身輸入的，能夠自行定義名稱，描述，入口文件等信息

 輸入yes後就會出現一個package.json文件，裏面是包的一些配置，初始化完成。

npm install webpack --save-dev    --save-dev(-D)：把包保存起來，只用於開發環境

npm i jquery --save                           --save(-S)：運行環境和開發環境都須要

不一樣的方式安裝，在package.json中也會出如今不一樣的位置，分別是 devDependencies 和 dependencies 對象中：

 npm uninstall moment -S               卸載　　

安裝包以後就會出現node_modules文件夾

 

4.新建 webpack.config.js 文件

 1 var path = require("path")   // 獲取 nodejs 中的 path 對象
 2 var webpack = require("webpack")   // 獲取安裝好的 webpack 對象
 3 // 輸出
 4 module.exports = {  5     context: path.resolve(__dirname, './src'),   // 找到項目內的 src 目錄
 6  entry: {  7         app: './app.js'   // 入口文件
 8  },  9  output: { 10         path: path.resolve(__dirname, './dist'),   // 輸出文件夾
11         filename: 'bundle.js'                      // 輸出文件
12  } 13 }

View Code

 

5.新建 src 文件夾和入口文件 app.js

console.log(1)

app.js

如今的目錄是這樣的：

 

6.在 package.json 中添加打包命令

1 "scripts": { 2     "test": "echo \"Error: no test specified\" && exit 1", 3     "start": "webpack"
4   },

View Code

 執行 scripts 中添加的 start 命令，至關於執行了 webpack 命令：

打包過程當中提示要安裝 webpack-cli ，安裝完成後就執行了打包命令，最後提示須要在 webpack.dev.config.js 裏添加 mode，那就加上 mode: "development",

 

 此時目錄中就多了輸出目錄 dist/bundle.js

 

7.在頁面中添加 bundle.js 就能夠執行 http-sever -p 8881 查看頁面了

<div id="root">test</div>
<script src="./dist/bundle.js"></script>    

看到可以正確運行 app.js： 

 

怎麼用安裝好的jQuery呢，直接require就行了

var $ = require("jquery")   // 導入 jQuery 包
var $root = $('#root')
$root.html("這是jQuery插入的文字")

 用其餘的js也是同樣，被用到的js須要exports一下，app.js require 這個js就能夠了

1 module.exports = {
2     print: function () {
3         console.log("util.js",123)
4     }
5 }

util.js

var util = require('./util.js')  // 導入 util.js
util.print()

app.js

效果：

 

 

webpack.config.js 中途修改了一下，完整的代碼以下

var path = require("path")   // 獲取 nodejs 中的 path 對象
var webpack = require("webpack")   // 獲取安裝好的 webpack 對象
// 輸出
module.exports = {
    mode: "development",          // 編譯模式 development，production
    context: path.resolve(__dirname, './src'),   // 找到項目內的 src 目錄
    entry: {
        app: './app.js'   // 入口文件
    },
    output: {
        path: path.resolve(__dirname, './dist'),   // 輸出文件夾
        filename: 'bundle.js'                      // 輸出文件
    },
    plugins:[
        new webpack.optimize.UglifyJsPlugin()     // 壓縮js，編譯會慢，通常部署時候加上
    ]
}