webpack學習筆記

總結下遇到的問題，以及解決問題的步驟

npm install -S -D -g 有什麼區別

-S 即 npm install module_name --save 寫入dependencies
-D 即 npm install module_name --save-dev 寫入devDependencies
-g 全局安裝(命令行使用)
npm install module_name 本地安裝(將安裝包放在 ./node_modules 下)
dependencies與devDependencies有什麼區別呢？

devDependencies 裏面的插件只用於開發環境，不用於生產環境

dependencies 是需要發佈到生產環境的

打包的權限問題

打開Powershell控制檯輸入命令：
set-ExecutionPolicy RemoteSigned

提示Module webpack-cli 不存在

由於webpack4後的版本，命令遷移至webpack-cli，因此還需安裝webpack-cli

解決新版本手動打包失敗的問題

webpack .\src\main.js -o .\dist\bundle.js
加入參數 -o

Babel遇到的問題：

一、babel7.X版本

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime –D

cnpm i babel-preset-env babel-preset-stage-0 -D

添加.babelrc配置文件:

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

二、使用babel8.X版本

cnpm i babel-loader ‘@babel/core’ -D

添加.babelrc配置文件:

{
    　　　"presets": ["@babel/preset-env"],

   　　　"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]

　　  }

vue中render使用組件報錯

**在render中還是無法正常顯示組件內容，Vue-loader在15.之後的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
所以我們要在這兩個(vue-template-compiler和vue-loader)的基礎上再去下載這個插件，也就是要使用render渲染組件的話，需要下載三個包

cnpm i vue -S
cnpm i vue-loader vue-template-compiler -D
cnpm i vue-loader-plugin -S

然後在配置文件（webpack.config.js）那邊要加上

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

一些小總結

webpack-dev-server打包文件

使用這個webpack-dev-server 幫我們實時打包生成的bundle.js文件 ,並沒有存放在實際的物理磁盤上面，而是託管到了
電腦的內存中了,所有 我們在項目的根目錄中無法找到 這個打包好的bundle.js

所以我們可以去認爲,webpack-dev-server把已經打包好的文件 以一種虛擬的形式 存放到了這個項目的根目錄中去 雖然我們看不到
但是這個打包好的文件跟 dis src是屬於平級的 爲什麼不打包到dist裏面呢 原因就是 速度快， 內存的訪問速度很快，
磁盤的讀寫很慢 而且會消耗內存

html-webpack-plugin插件配置啓動頁面

好處 : 1. 自動在內存中根據指定頁面生成一個存放在內存的頁面
2. 自動把打包好的文件（如bundle.js）追加到頁面中去

實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

方式一：

1. 修改package.json的script節點如下，其中--open表示自動打開瀏覽器，--port 4321表示打開的端口號爲4321，--hot表示啓用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式二：

1. 修改webpack.config.js文件，新增devServer節點如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

2. 在webpack.config.js頭部引入webpack模塊：

const webpack = require('webpack');

2. 在plugins節點下新增：

 // 配置插件的節點
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]

前端打包過程識別不了非js模塊

需要導入第三方loader去處理其他類型的文件

cnpm i style-loader css-loader --save-dev     //css

cnpm i less-loader less -D			//less

cnpm i sass-loader node-sass --save-dev		//sacss

cnpm i url-loader file-loader --save-dev		//url

加載loader需要配置webpack.config.js中模塊語句

module : {   //配置第三方模塊
        rules: [ // 第三方模塊的匹配規則
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },//處理css文件的規則
          { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
          { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
          { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43&name=[hash:8]-[name].[ext]' },
          { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
          { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      ]
      }