从0开始配置webpack和搭建一个React项目
先来说说react搭建：
1 官方文档上也有提供直接下载react包，但是修改webpack配置比较麻烦
npx create-react-app my-app cd my-app npm start
修改webpack配置需要执行
npm run eject
2 自行搭建一个项目并且配置webpack--主要记录学习阶段～总结的可能不太好，勉强看看，重点记录一下第二种的方式
通过yarn管理包
- 下载yarn
yarn官网链接安装步骤都有的
- 在项目目录下，执行yarn init
会出现我们的package.json文件
- 安装webpack
yarn add webpack --dev
新建webpack.config.js文件，
贴官网示例:
const path = require('path'); module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' } };命令行执行webpack会发现dist目录
注意：yarn安装过程中如果出错，尝试将yarn切换到淘宝镜像再进行下载哦～，我安装过程中出现过问题，切到这就没问题了
yarn config set registry 'https://registry.npm.taobao.org'安装html-webpack-plugin
yarn add html-webpack-plugin --dev
文档使用链接地址
按照文档操作，修改webpack.config.js使用html-webpack-plugin打包html文件
再次执行webpack命令，会发现dist文件夹下面多了一个index.html
设置html-webpack-plugin的template模版,在src新建index.html,并且设置html内容
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [new HtmlWebpackPlugin(
{
template:'./src/index.html'
}
)]
};现在dist文档下面的index.html就是当前src下的index.html的模版了
- 安装babel
yarn add babel-loader @babel/core @babel/preset-env
具体详情见文档地址 在src/app.js中写入一些ES6语法，再次执行webpack命令，dist/app.js进行了转换
安装react转换 babel-preset-react
yarn add babel-preset-react --dev
修改webpack.config.js
const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.jsx' path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, plugins: [new HtmlWebpackPlugin( { template:'./src/index.html' } )], module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env','react'] } } } ] } };安装react
yarn add react react-dom
react添加操作地址详情
将src/app.js修改为app.jsximport React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('app') );再执行webpack进行打包
如果出现Error: Plugin/Preset files are not allowed to export objects, only functions.错误
说明babel的版本不一致，我这边是因为"babel-preset-react": "^6.24.1"默认装的6版本，其他babel安装的是7版本，所以统一升级到7或者降级到6
yarn add [email protected] --dev
这样在进行打包，就可以了，这个时候打开dist/index.html我们看到hello, world!说成功编译了react
安装style-loader
yarn add css-loader style-loader --dev
安装地址操作详情
在webpack.config.js的rules中添加{ test: /\.css$/, use: ['style-loader', 'css-loader'], },在src下新建一个文件index.css，随便修改一点样式
h1{ color:#F00; }在app.jsx中引入
import './index.css'
再次执行webpack打包，刷新dist/index.html
安装ExtractTextWebpackPlugin插件将css独立到单独的文件
yarn add extract-text-webpack-plugin --dev
const path = require('path'); var 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: 'app.js' }, module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env','react'] } } }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, ] }, plugins: [ new HtmlWebpackPlugin( { template:'./src/index.html' } ), new ExtractTextPlugin("index.css"), ], };webpack.config.js配置如上
再次执行webpack，dist目录下就多了一个index.css了～
注意：打包遇到Tapable.plugin is deprecated. Use new API on.hooksinstead错误，原因是extract-text-webpack-plugin目前版本不支持webpack4
执行：yarn add extract-text-webpack-plugin@next --dev安装sass-loader
yarn add sass-loader --dev
在webpack.config.js中rules添加
{ test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }新建一个index.scss文件
body{ background: #ccc; #app{ font-size: 22px; } }在执行webpack会出现报错Cannot find module 'node-sass'
查看文档链接
需要安装node-sassyarn add node-sass --dev
打包，查看index.html可以看到样式应用上去了～
安装url-loader处理图片链接
yarn add url-loader file-loader --dev
官网地址
在rules中加入：{ test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }项目中引入图片，进行打包，这样图片资源也打包解析进去了～
添加解析字体rule
{ test: /\.(eot|svg|ttf|woff|woff2|otf)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, name:'resource/[name].[ext]' } } ] },添加webpack-dev-server
yarn add webpack-dev-server --dev
修改package.json添加
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack-cli"
}
执行yarn run start启动项目yarn run build打包项目
最后附上当前为止修改后的webpack.config.js
const path = require('path'); const webpack = require('webpack'); var 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/[name].[hash].js', chunkFilename: './js/[name].[hash].js', }, devServer: { port: 8080, proxy: { '/expo': { target: 'https://xxx', changeOrigin: true, pathRewrite: { '/expo': '/expo', }, secure: false, }, }, hot:true }, module: { rules: [ { test: /\.m?jsx$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env','react'] } } }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, { test: /\.(png|jpg|gif|ico|jpeg)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, name: "[name].[ext]", publicPath: "../images/", outputPath: "images/" } } ] }, { test: /\.(eot|svg|ttf|woff|woff2|otf)$/i, use: [{ loader: "file-loader", options: { name: "[name].[ext]", publicPath: "../fonts/", outputPath: "fonts/" } }] }, ] }, plugins: [ new HtmlWebpackPlugin( { template:'./src/index.html' } ), new ExtractTextPlugin("css/[name].css"), ], optimization:{ splitChunks:{ name:'common', filename:'js/base.js' } } };