webpack的基本使用03
使用webpack
1、創建新項目
項目目錄
test.js
// CommonJS模塊化規范，導出 module.exports = function () {let test = document.createElement("div");test.textContent = "webpack yysd";return test; }learn.js
// ES6模塊化規范，導出 export function learnWebpack(){let learn = document.createElement("h1");learn.textContent = "i want to learn webpack well";return learn; }main.js
// CommonJS模塊化規范，導入 let test = require("./test"); document.getElementById("root").appendChild(test());// ES6模塊化規范，導入 import {learnWebpack} from "./learn" learnWebpack();index.html
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>Webpack Project</title></head><body><div id='root'></div><h3 id="learn"></h3><script src="dist/bundle.js"></script></body> </html>2、 進入項目目錄，通過npm init創建package.json
在Terminal窗口出入npm init命令生成package.json文件
name：項目名稱，一定要簡短，且不能有大寫。可能在項目中使用過 var express = require(‘express’), require 函數后面的參數，就是package.json 中的name字段。
version：版本號，安裝一個模塊的時候， 你可能指定過特定的版本號，npm install express @4.13.2, 版本號4.13.2 就是我們這里的version。版本號有三個組成部分：
- 4：表示的是大版本，一般是重大升級。
- 13：表示的是小版本, 在大版本的基礎進行的小的更新，如某個功能廢棄了，新增了那個功能。
- 2： 對該版本進行補丁，主要是版本bug的修復。
main：項目的入口文件。
scripts： 我們在命令行中執行的所有命令都寫在這個地方，然后用 npm run 去執行這個命令。
author ：作者。
license：項目要發行的時候需要的證書。
description：項目的描述描述。
3、局部安裝webpack，使用webpack打包js文件
局部安裝webpack
在Terminal窗口輸入：npm install webpack --save-dev
使用webpack編譯main.js 并打包到 bundle.js
創建一個文件并命名為webpack.config.js，文件名必須是webpack.config.js，不能改！！！
webpack.config.js文件內容模板：
配置package.json文件，在scripts里面添加"build": "webpack"
在Terminal窗口輸入npm run build，完成打包，打包之后的文件存放在dist文件夾中
在瀏覽器打開index.html，效果如圖所示
4、補充相關命令
查看webpack版本信息：npm info webpack
安裝 Webpack 開發工具：npm install webpack-dev-server --save-dev
總結
以上是生活随笔為你收集整理的webpack的基本使用03的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python打包exe程序（pyinst
- 下一篇： Thinkpad T450 安装固态硬盘