Webpack掉坑之路（1）——HelloWorld（基于npm
2018-09-26 本文已影响0人
DeepBig胜
前言：
基于ES6风格的React以及较新版本的webpack(4.x)和babel等，旨在搬砖和整理，为初学者和自己提供参考，可能存在许多不足之处，请多指教。
1. 初始化：
首先创建文件夹webpack_demo，然后执行命令npm init，进行初始化：
> npm init
2. 创建工程目录：
目录内包括app，config以及public，分别用于存放源代码文件、配置文件以及输出文件。创建目录结构如下：（在cmd控制台下，执行tree命令）
D:\webpack_demo> tree .
卷 software 的文件夹 PATH 列表
卷序列号为 8CFF-7734
D:\WEBPACK_DEMO
├─app
├─config
└─public
3. 创建HTML首页
在public目录下，创建一个index.html，作为主页，将存放app目录下的打包输出文件bundle.js，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
4. 编写入口文件main.js
在app目录下，创建一个main.js，暂时作为主要入口（entry），该文件将被打包为bundle.js，输出到public目录下，代码如下：
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component{
render(){
return (
<div>Hello, world!</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)
此时，需要安装一下react和react-dom包，命令如下：
> npm install --save react react-dom
5. webpack配置(config/webpack.config.js)
webpack配置好后，即可用webpack命令打包app中的源码，首先需要安装webpack相关依赖包，命令如下：
> npm install --save-dev webpack webpack-cli
然后在config目录下创建一个配置文件webpack.config.js，内容如下：
const path = require('path');
const base = path.join(__dirname, '..');
module.exports={
devtool: 'eval-source-map',
entry: path.resolve(base,'app/main.js'),
output:{
path: path.resolve(base, 'public'),
filename: 'bundle.js'
},
devServer:{
contentBase: path.resolve(base, 'public'),
historyApiFallback: true,
inline: true, //实时更新
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env","@babel/preset-react"],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
}
]
}
};
由于此处用到了babel，而且main.js以es2016的编码方式，需要用babel来进行转换，以兼容之前版本的es，依赖包安装命令如下：(https://www.npmjs.com/package/babel-loader)
> npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react
6. 添加启动脚本命令行
在package.json中，向"scripts"项添加执行webpack打包命令：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config config/webpack.config.js"
},
配置完毕后，执行命令npm start，可以进行打包，打包后我们能够看到public目录下多出了一个bundle.js的文件，说明打包成功。内容大概如下所示：
>npm start
> webpack_demo@1.0.0 start D:\webpack_demo
> webpack --config config/webpack.config.js
Hash: e5644b2f4476f963bdc1
Version: webpack 4.20.2
Time: 934ms
Built at: 2018-09-26 23:19:52
Asset Size Chunks Chunk Names
bundle.js 1.87 MiB main [emitted] main
Entrypoint main = bundle.js
[./app/main.js] 2.66 KiB {main} [built]
+ 11 hidden modules
7. 实现页面实时更新
为了能够在编码的同时实时更新前端页面，我们需要安装webpack-dev-server
webpack-dev-server的依赖包安装命令如下：
> npm install --save-dev webpack-dev-server
然后在package.json文件对应的"scripts"中，添加一行执行脚本命令：
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config config/webpack.config.js",
"server": "webpack-dev-server --open --config config/webpack.config.js"
},
...
8. 启动服务器
执行命令npm run server，具体的服务器配置信息如上面的webpack.config.js中的"devServer"。 执行结果如下：
D:\webpack_demo>npm run server
> webpack_demo@1.0.0 server D:\VictorLin\workspace\webpack_demo
> webpack-dev-server --open --config config/webpack.config.js
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\webpack_demo\public
i ｢wds｣: 404s will fallback to /index.html
i ｢wdm｣: wait until bundle finished: /
i ｢wdm｣: Hash: e734530a0f196c5a077c
Version: webpack 4.20.2
Time: 1218ms
Built at: 2018-09-26 23:31:14
Asset Size Chunks Chunk Names
bundle.js 2.69 MiB main [emitted] main
Entrypoint main = bundle.js
[./app/main.js] 2.66 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/node-libs-browser/node_modules/punycode/punycode.js] 14.3 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
+ 22 hidden modules
i ｢wdm｣: Compiled successfully.
如果执行成功的话，会自动弹出已经将打包好的public/bundle.js的public/index.html页面，并显示"Hello, world!"字眼，结果如图：
helloworld!.jpg
我们可以对app/main.js进行修改，比如添加几个感叹号：
//app/main.js
...
class App extends Component{
render(){
return (
<div>Hello, world!!!!!!!</div>
);
}
}
...
然后保存，会看到控制台会继续执行编译：
i ｢wdm｣: Compiling...
i ｢wdm｣: Hash: c771406eb303106ec693
Version: webpack 4.20.2
Time: 103ms
Built at: 2018-09-26 23:33:50
Asset Size Chunks Chunk Names
bundle.js 2.69 MiB main [emitted] main
Entrypoint main = bundle.js
[./app/main.js] 2.66 KiB {main} [built]
+ 36 hidden modules
i ｢wdm｣: Compiled successfully.
过程中包含了执行打包、index.html引用bundle.js，结果如图，确实是多了几个感叹号：
helloworld!!!!!!!.jpg
添加style/css loader支持
命令如下：
> npm install --save-dev style-loader css-loader
webpack.config.js配置如下
//其他配置...
module:{
rules:[
//其他配置... ,
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
}
]
}
]
}
如此便可以在app目录下创建一个css文件，然后让main.js中的组件引用，结果如图：
helloworld!!!!!!!_with_css.jpg
绑定本地IP
在devServer中添加一行host即可绑定本地IP，否则默认启动的服务器只绑定本地的localhost(127.0.0.1)，示例如下：
//其他配置项...
devServer: {
host: "192.168.4.24",
port: 3001,
//其他配置项...
},
结束语：
都是照搬大佬们的东西，并没有什么原创的，但也不至于抄袭文字，仅供自己和其他初学者学习，有不足之处，请多多指教。更详细教程请参考：
https://segmentfault.com/a/1190000006178770
附录：
1. package.json
package.json中的内容，包括本文中所使用到的各个依赖包及其版本：
//package.json
{
"name": "webpack_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config config/webpack.config.js",
"server": "webpack-dev-server --open --config config/webpack.config.js"
},
"author": "Victor",
"license": "ISC",
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9",
"css-loader": "^1.0.0",
"style-loader": "^0.23.0"
}
}
2. webpack.config.js
//config/webpack.config.js
const path = require('path');
const base = path.join(__dirname, '..');
module.exports={
devtool: 'eval-source-map',
entry: path.resolve(base,'app/main.js'),
output:{
path: path.resolve(base, 'public'),
filename: 'bundle.js'
},
devServer:{
contentBase: path.resolve(base, 'public'),
historyApiFallback: true,
//host: "192.168.4.24", //配置ip
//port: 3000, //配置端口
inline: true, //实时更新
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env","@babel/preset-react"],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
}
]
}
]
}
};
初始项目的github如下地址，基于React和Antd，只需执行初始化命令（npm/yarn install）即可使用:
https://github.com/DeepbigSheng/ReactDemoBasedOnAntd
