安装webpack
Webpack可以使用npm安装，新建一个空的文件夹（此处命名为react-redux-starter），在终端中转到该文件夹后执行下述指令就可以完成安装。
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
正式使用Webpack前的准备
在上述文件夹中需要创建一个package.json文件，这是一个标准的npm说明文件，里面包括当前项目的依赖模块，自定义的脚本任务等信息。在终端中使用npm init命令可以自动创建这个package.json文件
npm init
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。
初步使用webpack打包
回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:
index.html --放在public文件夹中;
Launcher.js-- 放在app文件夹中;
App.js-- 放在app文件夹中;
此时项目结构如下图所示
文件目录
输入测试代码
index.html
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
<script src="../public/bundle.js"></script>
</body>
</head>
App.js
const launcher = require('./Launcher.js');
document.querySelector("#root").appendChild(launcher());
Launcher.js
// Launcher.js
module.exports = function () {
var greet = document.createElement('div');
greet.textContent = "Hi there and launcher!";
return greet;
};
package.json
{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"build": "node_modules/.bin/webpack --mode development",
"start": "node_modules/.bin/webpack-dev-server --content-base public/ --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
webpack.config.js
var path = require("path");
module.exports = {
entry: {
app: ["./app/App.js"]
},
output: {
path: path.resolve(__dirname, "public"),
publicPath: "/public/",
filename: "bundle.js"
}
};
在终端执行：
npm run build
执行完成后，手动打开index.html,效果：
效果图
配置自动刷新js，css
在终端执行：
npm run start
执行完成后，手动打开index.html,效果：
效果图
网友评论