需要根目录webpack.config.js src/index.js src/indxe.html 打包使用了插件HTML就会挂载输出在根目录下面 虽然看不见但是存在
替换vue配置在这一期
https://blog.csdn.net/qq_43505774/article/details/106388414
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
或者改成
"vue": "^2.5.2",
"vue-router": "^3.0.1",
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
这上面全是babel-loader转译的包插件语法preset是语法
"bootstrap": "^4.5.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
///
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
下面这三个是react 你下载更换vue也一样
///
"sass": "^1.26.5",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
//url是解析图片用的 结合file-loader但是只要使用url-loader
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
.babelrc文件内容
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
如下是webpack.config.js配置文件
const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const htmlplugin=new HtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),//源头文件
filename:"index.html",//生成首页的文件名称
environment: {
arrowFunction: false
}// 打包不使用箭头函数
})
module.exports={
//webpack基于node构建的
mode:"development",
// entry: {
// index: './src/index.js',
// main: './src/main.js'
// },
// output: {
// filename: '[name].js',
// path: path.resolve(__dirname, 'dist')
// },
entry: {
index: './src/index.js'
},
output: {
filename: 'index.js',//通过热加载输出script文件挂载在目录与index.HTML一样
path: path.resolve(__dirname, 'dist')
},
//production 提供了约定大于配置 约定打包文件是src/index ->dist/main
plugins:[
htmlplugin
],
module: {
//所以第三方模块的配置规则
rules: [
{
test:/\.js$/,use:use:[{
//兼容浏览器
loader: 'babel-loader',
options:{
cacheDirectory:true,
parsets:["@babel/preset-env",{
targets:{
"ie": "11",
"chorme":"87"
},
"corejs": "3", // 新写法兼容老浏览 器
"useBuiltIns":"usage"
}]
}
}]},
//{test:/\.ts|\jsx$/,use:'babelloader',exclude:/node_modules/},
{
test:/\.css/,use:['style-loader','css-loader?modules']},
{
test:/\.scss/,use:['style-loader', {
loader: "css-loader",
options: {
modules: {
localIdentName: "[path][name]-[local]-[hash:5]"
}//import css from '路径' console.log(css)会生成模块
//这是react的处理办法 vue就是style里面写scoped
//支持id与class 控制台输出的模块是健对值形式
}//css scss less一样的配置模块化
}]},
{
test:/\.(jpg|PNG|png|jpeg)/,use:[{
loader:"url-loader",limit:1024}]},//超过size会依赖file-loader},
{
test:/\.less/,use:['style-loader','css-loader']}
]
},
resolve: {
extensions: [".js", ".jsx", ".json"]
},
performance: {
hints:'warning',//false关闭提示 下面设置就没必要了
//入口起点的最大体积
maxEntrypointSize: 50000000,
//生成文件的最大体积
maxAssetSize: 30000000,
//只给出 js 文件的性能提示
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js');
}
}
}