webpack的使用和配置
2021-05-19 10:27
YPE >
标签：js es6 webpack babel
webpack优势
代码分离
装载器(css.sass,jsx等)
智能分析(require("./template/"+names+"e.js"))
1.安装webpack
npm install -g webpack
在项目中
输入npm init，完成后yes，会产生一个package.json用于下载配置
2.webpack的基本使用
将app.js中内容转到bundle.js
在终端输入
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(`${people[index].name}
`);
})
people.js
let people=[
{name:"henry"},
{name:"Bucky"},
{name:"Emily"}
];
module.exports=people;
index.html
html>Webpack
style.css
body{
background:skyblue;
}
本文出自 “Rcid” 博客，请务必保留此出处http://13419255.blog.51cto.com/13409255/1975347
webpack的使用和配置
标签：js es6 webpack babel
原文地址：http://13419255.blog.51cto.com/13409255/1975347