https://www.cnblogs.com/brandonhulala/p/6057378.htmlcss
npm install webpack -g 安裝後驗證:webpack-versionhtml
進入一個新建的空項目,執行npm init---一路回車vue
npm install webpack -D node
webpack默認支持commonjs寫法webpack
index:頁面。頁面只引入bundle.js(編譯後的文件)web
entry.js 入口文件,編寫咱須要的代碼npm
終端:webpack entry.js bundle.js (將入口文件編譯到bundle.js);//這裏注意每次修改js文件後都要 編譯一次.json
導入其餘js文件:在其餘文件modele.exports=...... 而後在入口文件var name=requier(url)導入瀏覽器
導入後再執行webpack entry.js bundle.js服務器
js文件中加載css文件,要下載依賴以下:style-loader和css-loader的依賴
npm install css-loader --save //這裏注意-- --save是將下載的依賴名和版本號保存到 package.json的文件中
npm install style-loader --save
下載後在js中:require(style-loader!css-loader!./style.css);//這裏注意要加入轉換器(後續會講webpack.config配置就不須要)
注意:在webpack中,多個loader加在要用 ! 鏈接多個loader.
做用:配置一些webpack須要的入口,出口,rules.....
module.exports={ entry:["./entry.js"],//入口文件 output:{ filename:"bundle.js" //出口文件 }, devtool:"source-map",////直接生成source-map module:{ //轉換器 rules:[ //設置全部以.css結尾的 { test:/\.css$/, loader:'style-loader!css-loader' }, //設置全部.js結尾的Es6轉換Es5(還沒有結束,還要預設,看下文) { test:/\.js$/, loader:"babel-loader", exclude:/node_modules/ //排除哪些目錄的js.node——modeles } ] } };
//配置後每次修改就不須要webpack entry.js bundle.js.直接執行webpack就能夠了
// 配置Es6轉換Es5除了上文的在webpack.config.js中配置babel-loader外,還須要在目錄新建一個文件夾, 名稱爲.babelrc.內容爲{'presets':['2015']}
{ 'presets': ['es2015'] }
//配置了loader之後引入css文件就不須要require(style-loader!css-loader!./style.css).直接 require("./style.css")
webpack 開發環境下編譯(打包)
webpack -p 生產環境下編譯(壓縮)
webpack -w 監聽文件改動,自動編譯(速度更快).就不用每次執行webpack去編譯了
webpack -d 開啓(生成)source maps.用來調試.沒有開啓的狀態下在瀏覽器的開發者工具只有index和 bundle壓縮後的js.開啓後能夠看到bundle所加載的全部資源的文件(方便調試)
注:若是-p -w -d都要開啓.直接執行webpack -wdp
首先下載如下:
npm install babel-loader --save
npm install babel-core --save
npm install babel-preset-es2015 --save
首先命令安裝環境:npm install webpack-dev-server -g //-g是全局安裝
使用:webpack-dev-server 默認端口號:8080
修改端口:webpack-dev-server --port 8088 //相似這樣修改端口號
自動刷新瀏覽器:webpack-dev-server --inline //改變代碼後,自動刷新瀏覽器
熱重載(局部更改): webpack-dev-server --hot
若是要執行多個:webpack-dev-server --inline --hot
.......................固然也能夠在webpack.config.js中設置(推薦)........................
webpack.config.js中配置後直接運行:webpack-dev-server
module.exports={ entry:["./entry.js"],//入口文件 output:{ filename:"bundle.js" //出口文件 }, devtool:"source-map",////直接生成source-map //配置server devServer: { port:8080, inline:true, }, module:{ //轉換器 rules:[ //設置全部以.css結尾的 { test:/\.css$/, loader:'style-loader!css-loader' }, //設置全部.js結尾的轉換Es6(還沒有結束,還要預設) { test:/\.js$/, loader:"babel-loader", exclude:/node_modules/ //排除哪些目錄的js.node——modeles } ], } };
................. 還有一種打開方式:npm run dev //那麼若是配置呢?以下:................................
打開package.json文件,有一個scripts的選項,就是你運行的腳本.
在scripts中增長dev:"webpack-dev-server";//注意這裏的對象左邊是你運行時候的名字,好比npm run dev中的dev對應scripts中你的dev。右邊表示你執行npm run 一個name的時候實際上執行的命令
好比:我容許npm run test的結果就是在控制檯輸出了一個"我是測試"
{ "name": "myproject", "version": "1.0.0", "description": "", "main": "index.js", //scripts這裏是你運行的腳本 "scripts": { "dev": "webpack-dev-server", "test":"echo 我是測試" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.6.0" }, "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.7", "style-loader": "^0.18.2" } }
配置resolve,以下.
function resolve (dir) { return path.join(__dirname, '..', dir); //這裏path.join是node整合路勁方法,在該方法中,可使用一個或多個字符串值參數,該參數返回將這些字符串值參數結合而成的路徑。__dirname是根目錄的意思。該方法前兩個參數寫死,最後一個是路徑,路徑從根目錄開始寫。eg:"src/assets"。 //因爲該方法屬於path模塊,使用前須要引入path模塊(var path= require(「path」) ) } var path= require(「path」) .... module.exports={ entry:["./entry.js"],//入口文件 output:{ filename:"bundle.js" //出口文件 }, devtool:"source-map",////直接生成source-map devServer: { port:8080, inline:true, }, module:{ //轉換器 rules:[ //設置全部以.css結尾的 { test:/\.css$/, loader:'style-loader!css-loader' }, //設置全部.js結尾的轉換Es6(還沒有結束,還要預設) { test:/\.js$/, loader:"babel-loader", exclude:/node_modules/ //排除哪些目錄的js.node——modeles } ], }, //配置省略文件後綴和簡化路徑 resolve:{ extensions:[" ",".js",".css",".json",".jsx」,".vue"], //省略文件後綴 alias: { '@':resolve("src/assets") //resolve方法定義在上方,之後引入文件只要引入寫法:」@/...其他的路徑」。 } } };
動態導入時chunkFilename默認狀況是數字,0,1....;當咱們動態引入import("lodash")的時候;若是想要知道打包之後的文件是lodash而不是0.js,只須要在導入的時候加註釋:這樣打包的時候就會就會將註釋中的webpackChunkName的值替換[name],具體詳情參考文檔:https://webpack.js.org/guides/code-splitting/#dynamic-imports
import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal') import ( /* webpackChunkName: "yourFileName" */ filePath); import ( /* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => { console.log(_) }).catch(error => 'An error occurred while loading the component');