webpack前端工程化構建工具的使用

時間 2019-12-01

標籤 webpack 前端工程構建工具使用简体版

原文原文鏈接

一.模塊打包機html

1.建立文件webpack

　　在目標文件下創建一個src文件夾做爲js代碼區；做爲例子，我建立了兩個js文件，並利用commonJS規範require引入到index.js中；web

moduleA.js:chrome

module.exports={
    name:"MoudleA",
    getName:function(){
        return "我是AAA模塊"
    }
}

moduleB.js:npm

module.exports={
    name:"MoudleB",
    getName:function(){
        return "我是BBB模塊"
    }
}

index.js:json

var moduleA = require("./moduleA");
var moduleB = require("./moduleB");
console.log(moduleA.name);
console.log(moduleB.name);

index.html:瀏覽器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <div></div>
<script src="src/index.js"></script>
<!--     <script src="dist/index.bundle.js"></script> -->
</body>
</html>

此時運行一定會出錯。由於瀏覽器不認識require,瀏覽器不支持什麼commonJS,因此這時候須要用到webpack。webpack-dev-server

2.安裝webpackui

npm install -g webpack  //全局安裝

3.打包spa

webpack  src/index.js  ./build.js

把index.js打包成build.js，因此index.html的script路徑要改成新的打包後的文件路徑。

<script src="build.js"></script>

此時再執行webpack src/index.js ./build.js成功則會生成一個build.js文件。

4.簡化打包指令

咱們前面在更改代碼時須要屢次執行webpack src/index.js ./build.js命令，那麼如何簡化這條命令，換句話說，可不能夠用webpack這個指令來代替這一長串呢？固然是能夠的。

首先，配置webpack.config.js文件；

這裏的輸出文件夾dist若是不存在會自動幫咱們建立好。配置好入口和輸出路徑後別忘記改index.html的script路徑。

須要注意的是，咱們如今只是全局安裝了webpack,這是不夠的，咱們須要局部再安裝一次webpack,npm install --save-dev webpack

而後咱們再執行webpack命令。

4.熱更新webpack-dev-server

咱們在每次修改代碼的時候都須要手動的執行webpack命令，咱們能夠用熱更新webpack-dev-server自動的更新瀏覽器；

安裝webpack-dev-server

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

在webpack.config.js裏面配置devServer

此時執行

webpack-dev-server --inline --hot

便能實現熱更新了。還有更簡化的，即是配置package.json的啓動，

這裏增長一條 "start":"webpack && webpack-dev-server --inline --hot" 便實現了npm start 代替webpack和webpack-dev-server --inline --hot命令

執行

npm start

打開瀏覽器8088端口，

相關文章

相關標籤/搜索

前端工程化

網站建設指南

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<