webpack的使用和配置

時間 2021-08-14

標籤 css html node jquery webpack web npm json 瀏覽器 sass 欄目 CSS 简体版

原文原文鏈接

webpack優點css

代碼分離html

裝載器(css.sass,jsx等)node

智能分析(require("./template/"+names+"e.js"))jquery

1.安裝webpackwebpack

npm install -g webpackweb

在項目中npm

輸入npm init，完成後yes，會產生一個package.json用於下載配置json

2.webpack的基本使用瀏覽器

將app.js中內容轉到bundle.jssass

在終端輸入

webpack app.js bundle.js

在終端輸入則頁面會不斷跟進

webpack app.js bundle.js --watch

獲取另外一個js中的數據

被獲取js:a.js

module.exports="Hello EveryBody";

獲取js的js

alert(require('./a.js');注意訪問本地文件必需要用./,對於npm中的文件則不須要

3.引入jquery等第三方文件jquery在webpack中的引用

1>.安裝jquery

在項目中輸入

npm install jquery --save

2>.引入jquery

let $=require("jquery");

4.靜態文件模塊化

1>.安裝css-loader和style-loader

npm install css-loader style-loader--save-dev

2>.樣式模塊化

require("!style-loader!css-loader!./style.css")

5.上述的靜態文件模塊化，在實際應用中寫法過於複雜

規範的文件模塊化

將文件規範的放入src的js和css下

webpack.config.js

module.exports = {

//入口文件

entry: './src/js/app.js',

//出口文件

output: {

//選擇路徑,__dirname當前路徑

path: __dirname + "/dist",

filename: "bundle.js"

//須要依賴的插件或者裝載器

module:{

loaders:[

{

test: /\.css$/,

loader: "style-loader!css-loader"

}

]

}

6.webpack服務器設置

安裝webpack依賴

npm install -g webpack-dev-server --save-dev

在package.json中的scripts中輸入

"start":"webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",

在終端輸入

npm start

瀏覽器輸入localhost:8080便可，會自動更新

7.安裝babel並配置依賴

npm install babel-core babel-loader babel-preset-es2015 --save-dev

在webpack.config.js中添加

module:{}中loaders中添加如下

{

test:/\.js$/,

loader: "babel-loader",

//排除

exclude:/node_modules/,

//查詢

query:{

presets:["es2015"]

}

webpackage.config.js

module.exports = {
//入口文件
entry: './src/js/app.js',
//出口文件
output: {
//選擇路徑,__dirname當前路徑
path: __dirname + "/dist",
filename: "bundle.js"
},
//須要依賴的插件或者裝載器
module:{
loaders:[
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test:/\.js$/,
loader: "babel-loader",
//排除
exclude:/node_modules/,
//查詢
query:{
presets:["es2015"]
}
}
]
}
}

package.json

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "應用於webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Henry",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0"
  }
}

app.js

let people=require('./people.js');
let $=require("jquery");
require("../css/style.css");
$.each(people,function(index,item){
$('body').append(`<h1>${people[index].name}</h1>`);
})

people.js

let people=[
{name:"henry"},
{name:"Bucky"},
{name:"Emily"}
];
module.exports=people;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
</body>
<script src="dist/bundle.js"></script>
</html>

style.css