摘要:本工程代碼創建工程添加工程文件通過配置文件來使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后輸出文件的文件名是中的一個全局變量,它指向當前執行腳本所在的目錄接下來只要執行即可。
本工程代碼
創建工程</>復制代碼
$ yarn init
$ yarn add webpack
# **添加工程文件:**
# public/index.html
<span class="hljs-attr">Webpack</span> <span class="hljs-string">Sample Project</span>
# src/app.js:
document.querySelector("#root").appendChild(hello());
# src/hello.js
module.exports = function() {
var hello = document.createElement("div");
hello.textContent = "Hello World!";
return hello;
}
# webpack
$ yarn run webpack src/app.js public/bundle.js
$ open public/index.html
通過配置文件來使用 webpack
添加 webpack.config.js 文件。如下:
</>復制代碼
module.exports = {
entry: [
"./src/app.js", // 已多次提及的唯一入口文件
],
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后輸出文件的文件名
}
}
__dirname 是 node.js 中的一個全局變量,它指向當前執行腳本所在的目錄
接下來只要執行 $ yarn run webpack 即可。
配置執行腳本命令在 package.json 中添加:
</>復制代碼
"scripts": {
"start": "webpack"
},
接下來可以執行 $ yarn start 即可編譯打包。
使用 webpack 構建本地服務器如果想讓瀏覽器監聽文件的修改,自動刷新。webpack 提供了 webpack-dev-server 來實現這個功能。
</>復制代碼
yarn add webpack-dev-server
在 webpack.config.js 中配置:
</>復制代碼
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 實時刷新
}
在 package.json 中配置腳本命令
</>復制代碼
"scripts": {
"server": "webpack-dev-server --open"
}
接下來可以執行 $ yarn server 即可打開并監聽了。
使用 Loaders想要 webpack 能分析編譯 css 等其他文件,需要使用各種 loader 支持。(對 json,webpack 已經內置了處理器。)
添加對 css 支持:
</>復制代碼
# 安裝依賴
$ yarn add css-loader style-loader
安裝完 loader 需要 webpack.config.js 中添加“module”配置。
</>復制代碼
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: "style-loader" }, // style-loader 寫前面,否則報錯 -_-!!
{ loader: "css-loader" }
]
}
]
// test: 匹配文件拓展名(必須)
// use: 使用的 loader 的名稱(必須)
},
重新編譯,即可支持了 css 樣式。
添加對 React,JSX 支持:
</>復制代碼
# 安裝 babel 依賴
$ yarn add babel-core babel-loader babel-preset-env babel-preset-react
# webpack.config.js 添加 module
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [ "env", "react"]
}
},
exclude: /node_modules/
}
# 安裝 react, react-dom
$ yarn add react react-dom
# 加入 JSX 的 Happy.js
import React, {Component} from "react";
class Happy extends Component {
render() {
return (
I am happy!
);
}
}
export default Happy;
# 修改 app.js
import React from "react";
import ReactDOM from "react-dom";
import Happy from "./Happy";
import "./style.css";
const hello = require("./hello.js");
ReactDOM.render(
,
document.getElementById("root")
);
document.querySelector("#root").appendChild(hello());
重新編譯后,就可以看到我們添加的 Happy 了。
對 Babel 的配置:
可以為 babel 新建一個 ‘.babelrc’ 來多帶帶配置 babel
</>復制代碼
# .babelrc:
{
"presets": [ "env", "react"]
}
# webpack.config.js 去除 babel-loader 下的 options
使用插件
插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量。可以用來處理各種各樣的任務。
使用 html-webpack-plugin, 它會自動幫你生成一個 html 文件,并且引用相關的 assets 文件(如 css, js)。
</>復制代碼
# 安裝庫
$ yarn add html-webpack-plugin
# 修改 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
...
output: {
path: path.resolve(__dirname, "build"), // 打包后的文件存放的地方
filename: "bundle.js" // 打包后輸出文件的文件名
},
...
devServer: {
contentBase: "./build", // 本地服務器所加載的頁面所在的目錄
...
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.tmpl.html")
})
]
};
再編譯"""$ yarn start"""。可以看到目錄下生成了“build/”。
</>復制代碼
參考
https://doc.webpack-china.org...
https://www.jianshu.com/p/42e...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90476.html
摘要:使用測試的使用教程。本工程代碼創建工程安裝新建一個配置文件內容添加工程內容內容內容編譯運行說明如果過程中發生錯誤,會在工程根目錄下自動生成文件。 使用 yarn 測試 webpack 的使用教程。 本工程代碼 創建工程 $ mkdir test-webpack-app-yarn $ cd test-webpack-app-yarn $ yarn init # ... 安裝 webpac...
摘要:注意問題,不在是運行時所在的對象箭頭函數里面沒有用箭頭函數不能當構造函數下一篇入門到進階二循環數組對象參考視頻資料經典入門到進階 一、簡介 ES6 -> ECMA 標準 ES6 -> 2015年6月 ES6.0 每年6月份,發布一個版本 ES6環境: webpack3.x Traceur 二、let、const 2.1 關于定義(聲明)變量 var a=12; ...
摘要:前端日報精選實踐總結掘金第期動畫與動效之四完全指南眾成翻譯個編碼小技巧教程使用瀏覽器開發者工具檢查動畫性能眾成翻譯中文圖書深入理解譯變量的正確使用方法知乎專欄正式發布眾成翻譯來了知乎專欄代碼運行過程簡述一個人文章的中文 2017-06-21 前端日報 精選 redux-react實踐總結 - 掘金【第972期】HTML5動畫與動效之四flexbox 完全指南 - 眾成翻譯19個Java...
摘要:但是,有時候可能的一些庫不夠牛逼,還需要用到的相關插件來輔助完成,這些插件又和形成了依賴,最終,和我一樣,你也可能需要在中導入。關于異步打包組件的方案,請看我的其他文章只要你使用了,無論是,還是開發者也同樣適用這種方案 本文的目的 拒絕全局導入jQuery!! 拒絕script導入jQuery!! 找到一種只在當前js組件中引入jQuery,并且使用webpack切割打包的方案! 測試...
閱讀 3197·2021-09-22 15:05
閱讀 2759·2019-08-30 15:56
閱讀 1063·2019-08-29 17:09
閱讀 799·2019-08-29 15:12
閱讀 2083·2019-08-26 11:55
閱讀 3060·2019-08-26 11:52
閱讀 3378·2019-08-26 10:29
閱讀 1384·2019-08-23 17:19
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要