webpack的使用和配置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack的使用和配置相关的知识，希望对你有一定的参考价值。
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(`<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;
}本文出自 “Rcid” 博客，请务必保留此出处http://13419255.blog.51cto.com/13409255/1975347
以上是关于webpack的使用和配置的主要内容，如果未能解决你的问题，请参考以下文章
在 React 项目中使用 System.import 进行 Tree Shaking 和延迟加载的 Webpack 2 配置