流程
Step 1:首先安裝Node.js, 可以去Node.js官網下載.
Step2:在Git或者cmd中輸入下面這段代碼, 通過全局先將webpack指令安裝進電腦中
npm install webpack -g
Step3:使用Git Bash here 或者 cmd cd命令使當前目錄轉到當前項目的目錄下, 然后輸入下面這段命令
npm init
接下來會彈出一些信息, 就是一些項目名和一些參數的描述, 可以全部按回車使用默認信息, 完成之后項目文件夾下會生成一個package.json的文件
這樣webpack就安裝完成了.
Step1:創建項目文件夾, 名字自起, 但路徑名不要包含中文, 以及項目名也不要叫”webpack”, 并且不要包含大寫字母.
例:
Step2:接下來創建并編寫配置文件. 首先我們先介紹幾個配置文件的參數.
entry： 是 頁面入口文件配置 （html文件引入唯一的js 文件）
output：對應輸出項配置
path ：入口文件最終要輸出到哪里，
filename：輸出文件的名稱
publicPath：公共資源路徑
Step3:在你的項目目錄下創建webpack.config.js配置文件, 通過這個文件進行webpack的配置, 并且還要創建一些路徑保存基本文件. 例如:
src文件夾
Step4:在src的js下創建一個入口文件, 我創建的叫做entry.js, 在項目目錄再創建一個index.html用來調試使用. 編寫webpack.config.js文件,
//webpack.config.jsmodule.exports = {? ? entry :'./src/js/entry.js',//入口文件output : {//輸出文件filename :'index.js',//輸出文件名path : __dirname +'/out'//輸出文件路徑},}
//webpack.config.jsmodule.exports = {
entry :'./src/js/entry.js',//入口文件output : {//輸出文件filename :'index.js',//輸出文件名path : __dirname +'/out'//輸出文件路徑},
}
便在index.html和入口文件entry.js寫點什么看看是否成功配置,
//index.htmlss111//注意在這里引入的是打包完成的js文件
//entry.jsconsole.log('1234');
1
2
之后使用Git Bash here 或者 cmd cd命令使目錄為當前項目目錄, 輸入webpack或者webpack -w命令, 查看index.html是否成功console出1234;
webpack 和 webpack -w 區別
webpack -w可以對項目打包并且實時監控, 當前配置文件下的文件如果發生更改時重新打包, 但如果webpack的配置文件即webpack.config.js更改時還是要通過webpack進行打包.(退出webpack -w 操作 ctrl+c)
接下來我們繼續配置loader, 通過加載器處理文件：比如 sass less 等, 告知 webpack 每一種文件都需要使用什么加載器來處理。
Step1:為了方便我們先統一把所有的包都先下載下來, 下面再慢慢解釋.
npm install babel-loaderbabel babel-corecss-loaderstyle-loaderurl-loaderfile-loaderless-loaderless--save-dev
Step2:下載完成后, 我們修改webpack.config.js文件, 將加載器引入.
Step3:接下來我們先測試css, 我們在項目文件夾下的src文件夾下創建index.css. 隨便寫一點屬性.
因為在webpack中所有文件都是模塊, 所以必須要將css引入. 在剛剛的entry.js中添加如下代碼.
//entry.jsrequire('../css/index.css');//引入css文件console.log("1234");
1
2
3
打包webpack一下看看效果
Step4:當有多個js文件時, 如何進行引入呢? 接下來我們做一個簡單小功能來說明這個問題, 讓我們點擊方塊的時候, 方塊變大.
接下來在src的js文件夾下創建一個基本的工具tool.js(很多小的問題都被我擴大化了, 只是為了說明問題不一定適用)
src的js下創建一個demo1.js文件, demo2.js同理
修改入口文件entry.js
require('../css/index.css');vardemo1 =require('../js/demo1.js');vardemo2 =require('../js/demo2.js');? ? demo1.init();? ? demo2.init();
webpack一下, 看看效果
Step1:在img文件夾下隨便找一個小一點的圖片放進去.
Step2:修改entry.js
由于我們引入的是靜態資源, 在webpack.config.js中修改一下
大家自己webpack看看效果
我們在項目中有多個html文件時怎么處理呢?, 接下來我們重新設定配置文件, webpack.config.js
首先我們由于要使用webpack插件, 因此我們要重新下載一下webpack包, 將目錄定位到當前項目目錄, 輸入npm install webpack
之后我們修改webpack.config.js, 將下面代碼放到配置文件開頭. 這樣就可以使用插件了
varwebpack =require('webpack');
將插件信息寫到配置文件里
首先先定位目錄輸入命令npm install webpack-dev-server -g
, 修改webpack.config.js文件
publicPath:'http://localhost:8080/out',
1
html文件所引用的目錄也要更改:
webpack-dev-server一下看看效果
