第一次接觸的webpack是在乙個3.x的資料中 在4.x的運用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的過程分享出來，其中很多不足歡迎大佬們指正
node安裝不再贅述
一．安裝
npm i webpack –d（在專案中安裝）"webpack": "^4.16.5"
npm install webpack-cli –g 4.x之後要單獨安裝
webpack --mode development 會自動生成乙個dist資料夾並在下面生成main.js儲存打包好的js檔案
注意:index.js要在src資料夾在webpack預設從src資料夾下獲取，不再支援 webpack a.js b.js這種方式(打包的入口檔案是'./src/index.js'，輸出路徑是'./dist/main.js')
二．初始化
npm init –y（執行預設配置） -----會生成乙個package.json的檔案。
三. 安裝loader
*css: css-loader, css-loader;
*css中的url: url-loader(use:'url-loader?limit=??(大小的位元組數)'), file-loader;
*字型圖示：,
*es6中的高階語法轉換：
1.安裝loader:
(1)npm i babel-core babel-loader babel-plugin-transform-runtime -d
(2)npm i babel-preset-env babel-preset-stage-0 -d
2.配置webpack
3.配置babelrc
在src下新建.babelrc檔案並設定
四. vue中webpack的使用
1.安裝vue的包 npm i vue -s
2.loader npm i vue-loader vue-template-compiler -d
3.新建乙個vue檔案並引入
import vue from 'vue';預設引用的是vue/joson裡配置的vue文 件是不全的 需要用到rende
import login from './login.vue'render:function
(createelement)
//向掛載的元素中直接覆蓋乙個名為login的元件 簡寫render: c=>c(login)
五. webpack.config.js的配置
const webpack = require("webpack");
const htmlwebpackplugin = require('html-webpack-plugin');
const path = require("path");
const vueloaderplugin = require('vue-loader/lib/plugin');
const cleanwebpackplugin = require('clean-webpack-plugin');
module.exports =,
output: ,
module: ,
,//es6 ,,,
]},
plugins: [
newwebpack.hotmodulereplacementplugin(),
newvueloaderplugin(),
new htmlwebpackplugin(),
new htmlwebpackplugin(),
newcleanwebpackplugin(
['dist/!*', 'dist/!*',], //
匹配刪除的檔案)],
devserver: ,
};
六. 其他詳細請參考webpack 官方文件
webpack 4 x安裝命令
執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...
webpack 4 X 基礎編譯
webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack mode development或者webpack mode production，這樣便會預設進行打包，入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...
webpack4 x學習筆記
有輸入必須有輸出，今天就來輸出一下學習webpack的過程。不得不先吐槽一下，比起可愛的grunt和好用的gulp，對webpack真心愛不起來！還有乙個血的教訓 千萬不要偷懶，有問題直接去官網。本文旨在記錄學習webpack的過車和遇到的問題，適合對node和webpack基礎知識有些了解的開發人...