webpack有4個重點內容：

• 入口(entry)：指示webpack 應該使用哪個模塊，來作為構建其內部依賴圖的開始

• 輸出(output)：告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認值為 ./dist

• 加載器(loader)：loader 讓 webpack 能夠去處理那些非 JavaScript 文件，比如css，圖片

• 插件(plugins)：插件可以用于執(zhí)行范圍更廣的任務，比如打包優(yōu)化和壓縮

隨時切換鏡像源：?

　　1. npm install nrm -g // 安裝nrm?

　　2. nrm ls // 查看鏡像源?

　　3. nrm use taobao // 選擇淘寶鏡像，也可以選擇cnpm

webpack安裝

　　npm init -y

　　npm i webpack -D

　　npm i webpack-cli -D

?

webpack初始使用

根目錄下面新建src目錄，在該目錄下面創(chuàng)建自己的js文件

然后運行npx webpack 將創(chuàng)建出來的js文件打包，(會生成一個dist目錄，默認打包出來的文件是main.js)此時會有警告，意思是mode選項沒有設置。mode模式有兩種，一種是deveopment，一種是production

添加mode選項，運行命令npx webpack --mode development

修改代碼，自動重新打包，運行命令npx webpack --mode development --watc

webpack熱更新

安裝`npm i webpack-dev-server -D

let path = require('path')module.exports = {// 入口文件配置entry: "./src/index.js",// 出口文件配置項 output: {// 輸出的路徑，必須是絕對路徑path: path.join(__dirname, 'dist'),// 輸出文件名字filename: "bundle.js",// 2. 靜態(tài)資源打包出來在服務器上運行時的訪問路徑，可以直接http://localhost:8080/dist/bundle.js訪問到服務器中的bundle.js文件publicPath: '/dist'},mode: 'development' }

index.html中修改 <script src="/dist/bundle.js"></script>

運行：npx webpack-dev-server

運行：npx webpack-dev-server --inline --hot --open --port 8090 --hot熱重載

配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"

npm run dev

webpack配置文件(針對Vue)

配置webpack.config.js

運行npx webpack

let path = require('path') let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// entry 屬性表示入口文件路徑entry: './src/index.js',// output表示輸出配置 output: {// path屬性表示輸出路徑 該路徑只能為一個絕對路徑path: path.join(__dirname, 'dist'),// filename屬性表示給輸出的文件取名filename: 'bundle.js',//publicPath 表示靜態(tài)資源在服務器的存放路徑// publicPath: '/dist' },// module屬性用來處理文件模塊 module: {// rules 主要用來表示各種文件使用哪種loader加載器 rules: [{// test表示處理的文件類型，它后面跟一個正則test: /\.css$/,// use表示使用哪些loader use: [{ loader: "style-loader" },{ loader: "css-loader" }]},{test: /\.less$/,use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'}]},{test: /\.scss$/,use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}]},{test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,use: [{loader: 'url-loader',// options表示配置項 options: {// limit屬性表示如果圖片大小大于limit參數的值，那就用路徑的形式展示；如果圖片小于limit參數的值，那就用base64格式展示。（單位是b）limit: 40000}}]},{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',// options: {// presets: ['@babel/preset-env']// } }}]},// 插件 plugins:[new HtmlWebpackPlugin({// template 表示最后生成的HTML頁面以哪個文件為模板template:'template.html',// filename表示最后根據模板頁面生成的新的HTML頁面filename:'index.html'})],// 指定mode為開發(fā)模式mode:'development' }

對應的.babelrc

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

?

對應的package.json文件(相應npm安裝包即可)

{"name": "test-webpack","version": "1.0.0","main": "index.js","scripts": {"dev": "webpack-dev-server --inline --hot --open --port 8090"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.1.6","@babel/preset-env": "^7.1.6","babel-loader": "^8.0.4","css-loader": "^1.0.1","file-loader": "^2.0.0","html-webpack-plugin": "^3.2.0","less": "^3.8.1","less-loader": "^4.1.0","node-sass": "^4.10.0","sass-loader": "^7.1.0","style-loader": "^0.23.1","url-loader": "^1.1.2","vue-loader": "^15.4.2","vue-template-compiler": "^2.5.17","webpack": "^4.26.0","webpack-cli": "^3.1.2","webpack-dev-server": "^3.1.10"},"dependencies": {"vue": "^2.5.17","vue-router": "^3.0.2"},"description": "" }

?

　　

轉載于:https://www.cnblogs.com/ressiry/p/10502754.html

總結

以上是生活随笔為你收集整理的webpack简单配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。