標籤：too css dev put 緩衝 控制台 module 引入 存在
1、基本配置webpack在執行時，除在命令列傳入參數，還可以通過指定的設定檔來執行。預設會搜尋目前的目錄下webpack.config.js。這個檔案是一個node.js模組，返回一個json格式的設定物件，或者通過--config選項來指定設定檔。 //建立webpack.config.jsvar webpack = require(‘webpack‘);module.exports = { entry:‘./entry.js‘, //入口檔案 output:{ //node.js中__dirname變數擷取當前模組檔案所在目錄的完整絕對路徑 path:__dirname, //輸出位置 filename:‘build.js‘ //輸入檔案 }, module:{ loaders:[ { test:/\.css$/,//支援正則 loader:‘style-loader!css-loader‘ } ] },//其他解決方案配置resolve: { extensions: [‘‘, ‘.js‘, ‘.json‘, ‘.css‘, ‘.scss‘]//添加在此的尾碼所對應的檔案可以省略尾碼}, //外掛程式 plugins:[ new webpack.BannerPlugin(‘This file is created by ly‘) ]} //entry.js中引入css模組：require(‘./style.css‘); ::運行webpack 2、plugins 外掛程式可以通過npm安裝第三方外掛程式，如：BannerPlugin的作用是給輸出的檔案頭部添加註釋資訊。 3、開發環境 ::編譯輸出內容帶進度和顏色webpack --progress --colors ::啟動監聽模式（沒有變化的模組會在編譯後緩衝大記憶體中，不會每次都被重新編譯）webpack --watchwebpack -w ::使用開發服務（它將在localhost:8080啟動一個express靜態資源web伺服器。並啟動監聽模式自動webpack，在瀏覽器開啟http://localhost:8080/，就可以瀏覽項目頁面，並通過一個socket.io服務即時監聽變化並自動重新整理頁面）npm install webpack-dev-server -g 4、啟動webpack-dev-server注意：在啟動了webpack-dev-server後，編譯後的檔案並沒有輸出到webpack.config.js中配置的output輸出目標檔案夾中，而是將Just-In-Time 編譯後的檔案儲存在記憶體中。 例子： //目錄結構myapp |__dist | |__styles | |__js | |__bundle.js | |__index.html |__src | |__component | |__index.js |__node_modules |__package.json |__webpack.config.js //webpack.config.jsvar webpack = require(‘webpack‘);var path = require(‘path‘);module.exports = { entry:‘./src/index.js‘, output:{ path:path.resolve(__dirname, ‘./dist/‘), filename:‘build.js‘ }, //設定開發人員工具的連接埠號碼,不設定則預設為8080連接埠 devServer: { inline: true, port: 8181 }, module:{ loaders:[ { test:/\.js?$/, exclude:/node_modules/, loader:‘babel-loader‘, query:{ presets:[‘es2015‘,‘react‘] } }, { test:/\.css$/, loader:‘style-loader!css-loader‘ } ] }}; //package.json{ "name": "myapp", "version": "1.0.0", "description": "", "main": "build.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist", "build": "webpack --progress --colors" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.4.0", "babel-preset-es2015": "^6.22.0", "jsx-loader": "^0.13.2", "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" }, "dependencies": { "jquery": "^3.1.1" }} <!--index.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首頁</title></head><body><div id="app"></div><script src="build.js"></script></body></html> ::安裝所有依賴npm install::運行npm run dev 最後在瀏覽器中開啟：http://localhost:8181/index.html 詳解package.json中命令： webpack-dev-server //啟動webpack-dev-server--progress --colors //打包進行顯示顏色--hot //開啟模組熱修複功能--content-base ./dist //設定webpack-dev-server啟動並執行根目錄是 ./dist--inline //使用inline的方式進行頁面自動重新整理--quiet //控制台中不輸出打包資訊--compress //開啟gzip壓縮 webpack-dev-server支援兩種自動重新整理的方式：①Iframe mode在網頁中嵌套一個iframe，將自己的應用注入都這個iframe中，每次檔案修改後都是這個iframe進行了reload②inline mode也是自動便也打封裝重新整理 參考文獻：http://www.tuicool.com/articles/BZrQ3mv 1190000006964335webpack.config.js設定檔
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
