vue初始化一個webpack項目 （vue init webpack myvue）、webpack學習使用

1、新建文件夾，在文件夾中，按住shift鍵，右擊打開windows PowerShell 

2、輸入命令 vue init webpack myvue ,這里myvue是vue項目名

 Project name myvue，按回車

Project description (A Vue.js project) 按回車

Author 作者的意思，隨便輸入一個名字

 

 上下鍵進行選擇，這里選第一個，回車

 

Install vue-router? 這里填入 y (是否安裝vue-router)

Use ESLint  to lint your code? 這里填 y (是否使用ESLint)

Set up unit tests? 這里填 y (是否使用單元測試)

Setup e2e tests with Nightwatch? 這里填 y (是否使用e2e測試)

 Should we run `npm install` for you after the project has been created? (recommended) 直接回車 （項目創建完成后，是否執行 npm install這條命令）

 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

用於學習的話，以上y的選項，全改為n

 

 進入到該項目，cd myvue

安裝依賴環境(根據package.json安裝的)：npm install

 

 可能會遇到如下錯誤，根據提示輸入 npm audit fix 修復它

 

安裝sass加速器：cnpm install sass-loader node-sass --save-dev

 

 項目的目錄結構

 

 使用IDEA打開該項目（該目錄下會多一個.idea文件夾）

 

 在IDEA的命令行輸入命令啟動程序：npm run dev

 

 

 

瀏覽器訪問：http://localhost:8080/

 

 服務器端的NodeJS遵循Commons JS規范，該規范核心思想是允許模塊通過require方法來同步加載所需依賴的其他模塊，然后通過exports或module.exports來導出需要暴露的接口。

導入：import "jquery";

導出：export function doStuff{}

模塊：module "localModule"{}

 

安裝Webpack

WebPack是一款模塊加載器兼打包工具，它能把各種資源，如JS、JSX、ES6、SASS、LESS、圖片等都作為模塊來處理和使用。

安裝命令：

npm install webpack -g

npm install webpack-cli -g

查看版本：

webpack -v             （4.44.0）

webpack-cli -v         （3.3.12）

如報錯，多按幾次就可以了。

 

配置

創建webpack.config.js配置文件

enter:  入口文件，指定WebPack用哪個文件作為項目的入口

output:  輸出，指定WebPack把處理完的文件放置到指定路徑

module:  模塊，用於處理各種類型的文件

plugins:  插件，如：熱更新、代碼重用等

resolve:  設置路徑指向

watch:  監聽，用於設置文件改動后直接打包

學習webpack

1、創建文件夾，並用IDEA打開

2、創建一個名為modules的目錄，用於放置JS模塊等資源文件

３、在modules下創建模塊文件，如 hello.js  ，用於編寫JS模塊相關代碼

//暴露一個方法 ：sayHi
exports.sayHi=function () {
  document.write("<h1>webpack學習</h1>");
};

4、在modules下創建一個名為main.js的入口文件，用於打包時設置entry屬性

//require導入一個模塊，就可以調用這個模塊中的方法了
var hello=require("./hello");
hello.sayHi();

5、在項目目錄下創建webpack.config.js配置文件，使用webpack命令打包

module.exports={
    entry:"./modules/main.js",
    output:{
        filename:"./js/bundle.js"
    }
};

6、在IDEA的命令行輸入：webpack  並按回車，，就會生成如下圖文件

 

 7、創建一個html文件，並把打包好的bundle.js導入

 

 打開該頁面