前文:
我在使用webpack的过程中,遇到一个坑,这个坑跟cnpm
和npm
有关系,所以当去下载依赖的时候,记得如果用cnpm
下载的话,都用cnpm
下载就可以,要不然打包和运行的时候很容易会出现bug
,当然也可以给node_modules
文件夹删掉,重新cnpm i
或 npm i
进行全部下载 都是可以的
一、先简单说下搭建React环境
1. 下载依赖
npm install --save-dev @babel/preset-react
npm insstall react react-dom --save
2.在项目根目录下创建 .babelrc
文件 ,进行配置
{
"presets": [
["@babel/preset-react"]
]
}
3. 在webpack.config.js 文件中 配置
注意:如果没有下载babel-loader的话,通过以下命令进行下载
npm install babel-loader --save-dev
module:{
rules:[
{
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
}
]
}
4. 在js文件中去简单使用React
import React,{Component} from 'react'
import ReactDom from 'react-dom'
class App extends Component {
render () {
return <div>Hello 你好</div>
}
}
ReactDom.render(<App />,document.querySelector('#root'))
4. 运行命令 进行打包,或服务器运行,效果如下:
二、简单搭建Vue环境
1.下载依赖,package.json中一些依赖配置项
如果没有package.json的话,在项目中运行命令
npm init
生成此文件
npm install webpack webpack-cli --save-dev // 本地安装wepack依赖包
npm install vue vue-loader vue-router vuex --save // vue需要的一些依赖
npm install vue-template-compiler --save-dev // vue模板解析
npm install style-loader css-loader sass-loader node-sass //css scss解析编译
npm install webpack-dev-server --save-dev // 简单地web服务器,运行后实时加载
npm install html-webpack-plugin clean-webpack-plugin --save-dev // 指定html文件自动打包生成到dist目录下以最新的内容形成
npm install --save-dev babel-loader @babel/core // 下载babel处理Es6语法
图示:
img
2. 在项目根目录下创建webpack.config.js文件,配置如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode:'production',
// 入口文件
entry: {
main: './src/main.js'
},
// 出口文件
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer:{
open:true,
port:8888,
hot:true,
contentBase:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.(css|sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
// 配置插件
plugins: [
// 打包指定路径的index.html到dist目录
new HtmlWebpackPlugin({ template: './public/index.html' }), // 我的index.html在public文件夹下
// 在打包之前需要对dist目录里的文件进行清除,从而只保留最新的文件
new CleanWebpackPlugin(),
// 在最新版,必须加载此插件,vue才能打包
new VueLoaderPlugin()
],
// 解決文件大小超出警告
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型(以字节为单位)
maxEntrypointSize: 50000000, // 整数类型(以字节为单位)
assetFilter: function (assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
}
3. 项目 根目录下创建.babelrc
文件,配置如下:
{
"presets": ["@babel/preset-env"]
}
注意:我这里只是简单地配置了一下babel,至于想配置更多的话,可以找到我的上一篇文章,或者去babel官网查询,官网的文档特别详细,可以去看看英文版的
4. 创建src目录
目录存放我们的vue代码,结构如下:
-
关于src这个目录的结构,相信大家都很熟悉了,这里就不细致说了,跟我们用vue脚手架创建后的结构差不多
-
关于我的index.html 我是在public文件夹中存放的,这里的结构类似于Vue3.x,不过肯定是没有那么全,我现在只是简单地一个搭建,能够让vue代码正常跑起来,至于更多的优化,可以查看webpack官方文档和vue-cli官方文档
5. 最后放一张我的整个项目结构图:
想看代码的,可以查看我的github仓库,进行下载:
https://github.com/923023913/webpack_vue
这样简单地一个vue项目就搭建成功了,只是我也是初学这个webpack,所以其中有些不足,大神们可以通过我的链接,对我的仓库代码进行修改,谢谢了!!!