一、github上创建项目仓库,带READNE.md
二、项目初始化
本地克隆项目,使用命令cnpm init项目初始化,命令结束之后项目文件夹下就会多出一个package.json文件。
三、webpack配置——安装以及基本配置
1、webpack安装
2、项目文件夹下新建webpack.config.js文件以及src/app.js
1)根据webpack官网修改wenback.config.js文件内容
官网:
修改之后:
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
};
2)app.js内容
3)打包
打包之后,项目文件夹下会多出一个dist/app.js文件。
四、webpack配置——指定输入html文件(html-webpack-plugin插件)
1)生成html文件
官网:
安装好插件之后修改webpack.config.js文件:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [new HtmlWebpackPlugin()]
};
再次执行打包命令就会出现dist/index.html文件。
2)打包输出的index.html改为指定html文件
新建src/index.html文件,内容为:
再修改webpack.config.js文件:
再次打包,dist/index.html文件内容就会发生改变:
五、webpack配置——支持ES6(babel-loader插件)
安装:
yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
安装babel-loader之后配置webpack.config.js
其中,
//官网
presets: ['@babel/preset-env']
//简写
presets: ['env']
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
plugins: [new HtmlWebpackPlugin({
template:'./src/index.html'
})]
};
修改src/app.js文件如下:
再执行打包命令,若dist/app.js文件中有以下内容,则代表支持了ES6:
六、webpack配置——react配置
1、安装babel-preset-react插件
2、修改webpack.config.js
3、安装react以及react-dom
4、修改src/app.js
5、重新执行打包命令后,dist/app.js文件有如下内容:
并且再浏览器中可打开dist/index.html文件可查看:
七、webpack配置——CSS样式配置
1、安装style-loader、css-loader
2、修改webpack.config.js
3、新建src/index.css并在app.jsx中引入
重新执行打包命令,刷新页面可看到页面字体变红。
4、安装extract-text-webpack-plugin插件
5、修改webpack.config.js文件
重新执行命令,会看到dist文件夹下多出一个index.css文件:
八、webpack配置——SASS以及LESS样式配置
1、安装sass-loader
2、安装node-sass
3、修改webpack.config.js
4、新建src/index.scss文件,并在app.jsx文件中引入
重新执行打包命令,刷新网页:
5、安装less以及less-loader
6、配置webpack.config.js
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
},
7、检验,检验方式与sass一样
九、webpack配置——图片配置
1、安装file-loader以及url-loader
2、修改webpack.config.js文件
3、检测图片是否可用
再执行打包命令,刷新浏览器:
同时,dist文件夹里会多处一个图片文件。
十、webpack配置——字体配置
1、安装font-awesome
2、修改webpack.config.js文件
3、使用
执行打包命令之后,网页中会有一个book的icon图标,并且dist文件夹中会出现eot、svg、ttf、woff、woff2、otf文件:
十、webpack配置——让生成的dist文档结构更清晰
1、修改webpack.config.js
主要修改如下:
//引入webpack
const webpack = require('webpack');
...
output: {
path: path.resolve(__dirname, 'dist'),
//修改输出文件路径
filename: 'js/app.js'
},
...
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
//配置图片文件输出路径,已经文件命名规则
name:'resource/[name].[ext]'
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'file-loader',
options: {
//配置字体文件输出路径,已经文件命名规则
name:'resource/[name].[ext]'
},
},
],
}
...
plugins: [
...
new webpack.optimize.CommonsChunkPlugin({
name:'common',
//配置公共模块文件输出路径
filename:'js/base.js'
})
]
完整的webapck.config.js如下:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/app.js'
},
module: {
rules: [
// react(jsx)语法的处理
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
//css的处理
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
},
//scss的处理
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader','sass-loader']
})
},
//图片的处理
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name:'resource/[name].[ext]'
},
},
],
},
//字体的处理
{
test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name:'resource/[name].[ext]'
},
},
],
}
]
},
plugins: [
//处理html文件
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
//独立css文件
new ExtractTextPlugin("css/[name].css"),
//提出公共模块
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'js/base.js'
})
]
};
配置完成之后,将之前生成的dist文件夹删除,再次执行打包命令,会生成新的dist文件夹。
十一、webpack配置——实现自动刷新
1、安装webpack-dev-server
2、启动,使用webpack-dev-server启动项目,可直接输入网址访问网页
虽然上面实现了可直接输入网址访问网页,但是出现了一个问题:字体未加载成功。解决方法如下:
修改webpack.config.js文件
再次执行打包命令:node_modules/.bin/webpack-dev-server,再访问localhost:8080/dist(具体端口看打包编译结果)即可。此时,实时渲染的功能已经实现,即当页面代码有所改动,页面会实时渲染,不需要重新执行打包编译命令。
十一、webpack配置——指定端口以及输入不存在的页面自动跳转到首页
修改webpack.config.js
十二、webpack配置——设置脚本命令,简化启动命令
修改package.json文件:
修改之后,可直接用以下命令启动:
yarn run dev
yarn run dist
十三、选择性提交代码
1、项目文件夹下新增.gitignore文件,例如不需要提交node_modules文件夹、dist文件夹、日志文件,内容如下:
十四、每次打包之前,删除上一次打包生成的文件
安装:
npm install --save-dev clean-webpack-plugin
修改webpack.config.js:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
plugins: [
...
new CleanWebpackPlugin(),
],
};
最后附上所安装的插件的版本信息:
十五、css modules配置
上述步骤还遗留了一个问题,那就是css modules的配置。详情请看下一章《webpack项目初始配置(二)——css modules与antd》。