1、使用第三方(JQuery)
2、模块化静态文件(CSS)
3、使用配置文件webpack.config.js
4、使用webpack-dev-server
5、使用babel转换插件
1、npm install jquery --save-dev
2、npm install css-loader style-loader --save-dev
3、webpack
4、npm install -g webpack-dev-server --save-dev
5、npm install babel-core babel-loader babel-preset-es2015 --save-dev
6、npm run build
7、npm start //开启本地服务器
目录树
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
style.css
body {
background: skyblue;
}
people.js
// 字符串
// module.exports = "Hello everybody!!!";
//方法 对象
/* function getHello() {
return "Hello Everyone Welcome to Lanou Class";
}
module.exports = getHello(); */
// es6 数组 对象
let people = [
{name: "Henry"},
{name: "Bucky"},
{name: "Emily"}
];
module.exports = people;
app.js
let people = require('./people.js');
let $ = require("jquery");
// 因为style.css是静态文件,所以引入时需要在文件名前加上修饰!style-loader!css-loader!,但是这样写会比较麻烦,所以有了webpack.config.js文件帮助进行优化
// require("!style-loader!css-loader!./style.css");
// 像上述引入文件及库会比较麻烦,所以有了webpack.config.js文件优化
// 有了webpack.config.js文件后
require("../css/style.css");
// $('body').append("<h1>" + people[0].name + "</h1>");
$.each(people, function(key, value) {
$('body').append("<h1>" + people[key].name + "</h1>");
})
console.log(people[1].name);
package.json
{
"name": "webpack-my-app",
"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"
},
"keywords": [
"webpack",
"打包工具",
"webpack-dev-server"
],
"author": "hr226",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^3.2.0",
"jquery": "^3.4.1",
"style-loader": "^1.0.0",
"webpack": "^4.40.0",
"webpack-cli": "^3.3.8"
}
}
webpack.config.js
module.exports = {
// 入口文件
entry: './src/js/app.js',
// 出口文件
output: {
path: __dirname + "/dist", //在当前路径__dirname下,创建一个dist文件夹
filename: "bundle.js"
},
// 需要依赖的插件或者是装载器
module: {
rules: [{
test: /\.css$/,
loader: "style-loader!css-loader"
}, {
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["es2015"]
}
}]
}
}
README.md
# 如何将 js 文件进行模块化
## module.exports require()
## 自定义文件,引入时需要使用 ./
## npm 下载的文件,不需要 ./
# 如何使用第三方
## 1、在 npm 服务器中下载第三方
## 2、require()第三方
# 如何将静态文件模块化
## 1、创建 css 文件
## 2、下载对应的加载器
## 3、修饰我们的 css 文件 !css-loader
# 如何配置 webpack.config.js
## 出口文件 入口文件 模块 加载器
# 如何使用 package.json 启动项目
## scripts "build" "start"
# 如何将 es6 转换为 es5
## babel babel-core babel-loader...(此处需要注意是否版本冲突)