webpack的使用和配置
webpack优势
代码分离
装载器(css.sass,jsx等)
智能分析(require("./template/"+names+"e.js"))
1.安装webpack
npm install -g webpack
在项目中
输入npminit，完成后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-loaderbabel-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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/bundle.js"></script></html>
style.css
body{background:skyblue;}
共同学习，写下你的评论
评论加载中...
作者其他优质文章
