筆記webpack

一、初始化項目結構:
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)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章