當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack简单笔记

發布時間：2023/12/10 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack简单笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文簡單記錄學習webpack3.0的筆記，已備日后查閱。節省查閱文檔時間

安裝

可以使用npm安裝

//全局安裝 npm install -g webpack //安裝到項目目錄 npm install --save-dev webpack

npm init會創建package.json文件。配置該文件可以簡化我們之后的一些操作，比如我們對其中的“script”添加start命令，可以用“npm start”替代webpack命令

{name: "webpack-example",..."scripts": {"start": "webpack"},... }

幾個概念

webpack是一個現代javascript應用程序的靜態模塊打包器。它構建一個依賴關系圖，包含所有模塊，打包成一個或多個bundle。

四個核心概念

entry ：指示webpack應該從哪個模塊開始，構建依賴圖。默認值./src
output：指示在哪里輸出創建的bundles，默認值./dist
loader：讓 webpack 能夠去處理那些非 JavaScript 文件。loader 能夠 import 導入任何類型的模塊
plugin：插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量

entry 文件的指定

單一entry文件

mkdir entrydemo cd entrydemo npm init

npm init會讓你輸入一些信息配置package.json。如下

{"name": "entrydemo","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "MIT" }

接下來我們要創建index.html和main.js文件。main.js文件操作index.html的p標簽內容
index.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"></head><body><p id="title"></p><script type="text/javascript" src="main.js"></script></body> </html>

main.js

document.getElementById("title").innerHTML="HELLO webpack";

下面我們要用webpack將main.js打包成bundle.js文件

如果你的webpack是全局安裝，那么

webpack main.js bundle.js

如果是安裝在項目根目錄

node_modules/.bin/webpack main.js bundle.js

注意，在webpack3中，webpack-cli是集成的，到了4里面分開來了。第一次webpack時候可能會提示你安裝webpack-cli，安裝即可。上面的命令也有所改變，關于webpack4，本文不贅述

然后將index.html的javascript路徑改為bundle.js

然后打開index.html，可以看到頁面和上面是一樣的

以上是用命令行指定entry file，下面我們寫配置文件webpack.config.js去構建bundle.js

module.exports = {entry: './main.js',output: {filename: 'bundle.js'} }

寫好配置文件后，運行webpack命令就構建好bundle.js了。（非全局安裝是node_modules/.bin/webpack）

多個entry file

假設我們的入口文件是main1.js和 main2.js，對應輸出是bundle1.js和bundle2.js
webpack.config.js這么寫

module.exports = {entry: {bundle1: 'main1.js',bundle2: 'main2.js'}output: {filename: '[name].js'} }

loader

Babel-loader

Babel-loader用來將JSX/ES6文件轉換成普通JS文件

module.exports = {entry: './main.jsx',output: {filename: 'bundle.js'},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['es2015', 'react']}}}]} };

CSS-loader

webpack.config.js

module.exports = {entry: './main.js',output: {filename: 'bundle.js'},module: {rules:[{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]},]} };

轉載于:https://www.cnblogs.com/pusidun/p/9087057.html

總結

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

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

上一篇：从Sun离职后，我“抛弃”了Java，拥
下一篇： java word搜索_java 实现w