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
body{
background:skyblue;
}