创建项目
$ mkdir example
$ cd example
$ npm init -y
创建目录结构
├── config // webpack 配置文件目录
├── package.json
├── server // 开启本地 node 服务文件, 包括热更新等
└── src // 源文件目录
安装 Webpack
$ npm i --save-dev webpack
编写 Webpack 配置文件
在 config 目录下新建文件:
$ cd config
$ touch webpack.config.dev.js
$ touch webpack.config.pro.js
我们先来写开发环境下的
webpack.config.dev.js
const path = require('path')
const webpack = require('webpack')
// 先定义一些路径
// 配置文件夹路径
const CONFIG_PATH = path.resolve(__dirname)
// 源码文件夹路径
const APP_PATH = path.resolve(CONFIG_PATH, '../src')
// 应用入口文件
const APP_FILE = path.resolve(APP_PATH, 'index.js')
// 打包目录文件夹路径
const BUILD_PATH = path.resolve(ROOT_PATH, '../dist')
module.exports = {
// 入口
entry: APP_FILE,
// 输出
output: {
// 告诉 Webpack 结果存储在哪里
path: BUILD_PATH,
// 打包后的文件名
filename: 'bundle.js',
// 模板, 样式, 脚本, 图片等资源对应的 server 上的路径
publicPath: "/assets/",
}
}
一个最简单的 webpack 配置文件已完成
安装 Babel
我们使用 ES6 来编写代码, 所以需要安装 ES6 的 babel-preset
$ npm i --save-dev babel-cli babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
同时修改 webpack 配置文件, 在 module.exports 增加:
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
}
在根目录添加 babelrc 文件
cd /path/to/example
touch .babelrc
修改. babelrc
{
"env": {
"development": {
"presets" : ["es2015", "stage-0", "react"],
},
"production": {
"presets" : [["es2015", { "modules": false, "loose": true }], "stage-0", "react"],]
}
}
}
安装其他 Loader
CSS-loader
style-loader
postcss-loader
less-loader
file-loader
url-loader
autoprefixer
npm i --save-dev css-loader style-loader file-loader less less-loader postcss-loader url-loader autoprefixer
同时修改 webpack 配置文件, 修改 module.exports 下的 module.rules:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')()
]
}
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')()
]
}
},
'less-loader'
]
},
{
test: /\.(eot|woff|ttf|woff2|svg|gif)(\?|$)/,
loader: 'file-loader?name=[hash].[ext]'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=1200&name=[hash].[ext]'
}
]
本地 node 服务
在 server 下新建 server.js 和 index.html:
$ cd server
$ touch server.js
$ touch index.html
安装 server 服务依赖
$ npm i --save express
修改 server.js 文件
const app = new(require('express'))()
// 本地预览代码的端口
const port = 3003
app.get('*', function(req, res) {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, function(error) {
if (error) {
/*eslint no-console: 0*/
console.error(error)
} else {
/*eslint no-console: 0*/
console.info("==>
来源: https://juejin.im/post/5a715fadf265da3e5661d667