五分钟-配置Webpack-React 2017.12(一)
因为是基于node环境, 必须确定node安装
验证安装ok?(说明符号 $: 在终端运行)
$ : node -v
$ : npm -v
webpack基础入门
webpack前身:browserify
缺点: 只能转化js
webpack作用?(废话不多说,现在webpack挺好用的就行)
一切都是模块化(js,css,图片等)
一个模块加速器,打包工具
安装webpack:
流程:
-
安装webpack命令环境
cnpm install webpack -g //这一步安装完成就可以使用webpack了 -g是全局 就是每个目录都能运行webpack验证是否安装成功,我们只需在任意地方右键->git bash(前提是安装了git) webpack --version //$ webpack --version 3.10.0 这是我安装的3.10.0版本 -
package.json 工程文件(需要依赖模块,库描述,版本,作者..)
2.1 手动建立
2.2 命令建立--新建webpack-demo目录,在该目录打开git bash命令.
$ : cnpm init
然后各种要求你输入的 然后一直Enter键让它默认.
最后在你的webpack-demo目录会生成一个文件package.json
项目出我的文件结构
**提示** 记得将我的注释去掉哦.
react-webpack2/
|
--- README.md //手动新建
--- package.json //经过上一步 cnpm init 已经存在.
--- webpack.config.js //手动新建
--- public/ //手动新建
|
--- index.html（模板文件） //手动新建
--- favicon.ico（网站图标） //手动新建
--- src/（项目文件都在这里）//手动新建
|
--- index.js（入口文件） //手动新建
--- pages/ （页面） //手动新建
--- components/（抽离的公用组件） //手动新建
--- css/ //手动新建
--- js/ //手动新建
--- images/ //手动新建
安装webpack: cnpm install webpack --save-dev
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', //相对路径
output: {
path: path.resolve(__dirname, 'build'), //打包文件的输出路径
filename: 'bundle.js' //打包文件名
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', //指定模板路径
filename: 'index.html', //指定文件名
})
],
devServer: {
contentBase: path.resolve(__dirname, 'build'),
inline: true
},
module: {
loaders: [ //配置加载器
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer'),
require('precss'),
require('postcss-flexbugs-fixes')
]
}
}
]
},
{
test: /\.js$/, //配置要处理的文件格式，一般使用正则表达式匹配
loader: 'babel-loader', //使用的加载器名称
query: { //babel的配置参数，可以写在.babelrc文件里也可以写在这里
presets: ['env', 'react']
}
},
{
test: [/\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000 //1w字节以下大小的图片会自动转成base64
}
}
]
}
}
src/index.js
function hello() {
console.log('hello world');
}
好了这就够了，我们已经可以运行这个项目了，打开命令窗口试一下：webpack
编译成功了，项目根目录下已经生成好build/bundle.js文件了，bundle.js文件前面的几十行代码其实就是webpack对怎么加载文件，怎么处理文件依赖做的一个声明。
我们可以将启动wepback的命令写到package.json中并添加一些有用的参数：
package.json
{
"name": "react-webpack2",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack --progress --watch --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"html-webpack-plugin": "^2.30.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"autoprefixer": "^7.2.3",
"css-loader": "^0.28.7",
"eslint": "^4.13.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.5.1",
"file-loader": "^1.1.6",
"postcss-flexbugs-fixes": "^3.2.0",
"postcss-loader": "^2.0.9",
"precss": "^2.0.0",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2"
}
}
....
请到该地址下载文件并放到你项目相应的位置
链接: https://pan.baidu.com/s/1slxB3Yl 密码: 4dhd
在react-webpack2/目录下
- $ : cnpm install //会自动安装package.json所依赖的文件.
继续:
- $: webpack // 执行完成后 webpack-react2目录的bulid文件下执行 index.htnl 文件 就跑起来的.
- 但是你发现 修改了文件 然后去刷新 不会有变化 因为没有执行webpack --progress --watch --hot
- 所以你执行 $ : webpack --progress --watch --hot
- 或者 $ : cnpm start //前提是你已经在
package.json配置过script 上面已经配置了 - progress是显示打包进程，watch是监听文件变化，hot是启动热加载
于是你再修改 去浏览器刷新 就ok了~
image.png
下一讲介绍-自动更新页面.
