一、初始化項目結構:
mkdir webpackDemo // 創建項目
cd webpackDemo // 進入項目
mkdir app // 在項目中創建app文件
mkdir common // 在項目中創建common文件
cd app // 進入app文件夾
touch app.js // 創建app.js文件
touch main.js // 創建main.js文件
cd … //返回到webpackDemo項目根目錄
cd common // 進入common文件
touch index.html // 創建index.html文件
備註:touch是linux系統下的命令,windows對應操作cd.>index.js
二、初始化項目package.json
npm init
三、安裝webpack V4.12
最新版本號安裝
npm install webpack -g // 全局安裝
npm install webpack --save-dev // 項目內安裝
固定版本號安裝 (@xx版本號)
npm install webpack@xx -g
npm install webpack@xx --save-dev
webpack4版需要去額外安裝webpack-cli
npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev
注意:package.json文件中不能有註釋,在運行的時候請將註釋刪除
四、打包關鍵
module.exports = {
// webpack4需要添加這個配置,development爲開發環境,production爲生產環境
mode: “development”,
entry: __dirname + “/app/main.js”, // 之前提到的唯一入口文件
output: {
path: __dirname + “/common”, // 打包後的文件存放的地方
filename: “index.js” // 打包後輸出文件的文件名
}
}
在主頁面index.html中引入index.js用於瀏覽器解析
**index.js是common文件夾下的文件經webpack打包後最終生成的供瀏覽器解析的js文件,這個不需要手動進行配置,甚至你不需要新建它,由webpack自動生成,後續我們會講解它;
五、webpack-dev-server來搭建本地開發服務器
——————————————————————————————————
一、初始化帶有webpack和router的項目
vue init webpack 項目名
二、正式打包修改配置
npm run build
vue-cli 打包配置
1、配置項目引用文件問相對路徑;
2、引用js文件路徑錯誤;
3、圖片路徑錯誤;
4、背景圖片路徑錯誤;
解決以上問題,需修改三個地方:
1、config/index.js(大約46行)
build: {
assetsPublicPath: './' // 修改爲相對路徑
}
2、build/utils.js(大約51行)
if(options.extract){
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 此處解決css中背景圖片路徑報錯
})
}
3、build/webpack.prod.conf.js(大約25行)
output: {
publicPath: './', // 添加這一行配置
}
三、路由模式配置
當路由模式爲history(不顯示#,默認爲hash)時,如果上線的項目不在根目錄下運行,則需要在router.js中配置base:‘項目路徑’,如base: ‘/vue-1105/dist’;
此外,
404錯誤
在History mode下,如果直接通過地址欄訪問路徑,那麼會出現404錯誤,這是因爲這是單頁應用(廢話)…其實是因爲調用了history.pushState API 所以所有的跳轉之類的操作都是通過router來實現的,解決這個問題很簡單,只需要在後臺配置如果URL匹配不到任何靜態資源,就跳轉到默認的index.html。具體配置如下:
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
Node.js (Express)