网站列表页是啥,福州网站建设seo,宿州保洁公司电话,网线制作原理webpack配置
entryoutput filenamepathpublicPath 。。 打包引入的基本路径#xff0c;#xff0c;#xff0c;比如引入一个bundle.js,。引用之后的路径就是 publicPathfilename -devServer:static : 静态文件的位置。。。hostportopencompress : 静态资源是否用gzip压缩hi…webpack配置
entryoutput filenamepathpublicPath 。。 打包引入的基本路径比如引入一个bundle.js,。引用之后的路径就是 publicPathfilename -devServer:static : 静态文件的位置。。。hostportopencompress : 静态资源是否用gzip压缩historyApiFallback: 服务器刷新页面会404因为如果是react或者vue路由导过去的页面直接拉去服务器是没有的会404设置为true会将所有404页面请求重定向到index.htmlproxy 设置代理 changeOrigin 改变请求来源targetpathRewrite
# 使用webpack serve启动服务器dependencies: {axios: ^1.7.9,html-webpack-plugin: ^5.6.3,webpack: ^5.97.1,webpack-cli: ^6.0.1,webpack-dev-server: ^5.2.0},const HtmlWebpackPlugin require(html-webpack-plugin)const path require(path);
module.exports{mode:development,devtool: source-map,entry: ./src/index.js,output:{path:path.resolve(__dirname,./dist),filename:bundle.js,publicPath:/},devServer:{static:[public,{directory: path.resolve(__dirname,./abc),watch:true}],// 静态文件的位置host:0.0.0.0,// 局域网可以通过ip访问 》 localhost会被解析成127.0.0.1回环地址主机自己发出去的包直接被自己接收port:9000,open:true,compress:true, // 是否为静态文件开启gzipproxy:[{context:[/api],target:http://localhost:8080/,pathRewrite:{^/api:},changeOrigin:true}],historyApiFallback:true},plugins:[new HtmlWebpackPlugin({template:./index.html})]
}
webpack自动编译
webpack开启监听自动编译
命令行执行 npx webpack --watch在webpack.config.js中设置watch:true
但是这样只会监听到源码变化后自动编译代码浏览器不会自动刷新
webpack提供了一个 webpack-dev-server可以在监听到文件变化后自动刷新浏览器 webpack编译react和vue
编译react
npm i babel-loader babel/preset-env babel/preset-reactimport React, {Component} from react;
import ReactDOM from react-dom/clientclass App extends Component{constructor() {super();this.state {message:hello react}}render() {return (h3{this.state.message}/h3)}
}export default App
import App from ./App.jsx;const sum (a,b){return ab;
}console.log(123)
//
// import LogoImg from ../abc/logo.jpg
import axios from axios;axios.post(/api/users/login).then(res{console.log(res,res)
})import ReactApp from ./App.jsximport React from react;
import ReactDOM from react-dom/client;var root ReactDOM.createRoot(document.querySelector(#app));
root.render(App/) module:{rules:[{test:/\.jsx?$/,exclude:/node_modules/,use:{loader:babel-loader,options:{presets: [[babel/preset-env],[babel/preset-react]]}}}]},webpack编译vue3
npm i vue vue-loader vue-complete-compilertemplatediv classcontainer{{ message }}/div
/templatescript setupimport {ref} from vue;const message ref(hello vue)
/scriptstyle
.container{color: red;
}
/style
主函数引入vue
import Vue, {createApp} from vue
import VueApp from ./app.vuevar app createApp(VueApp);
app.mount(#root)webpack中配置编译vue 编译vue需要使用一个插件VueLoaderPlugin const HtmlWebpackPlugin require(html-webpack-plugin)// vue文件的加载还用到一个插件
// const VueLoaderPlugin require(vue-loader/lib/plugin)
const {VueLoaderPlugin} require(vue-loader)const path require(path);
module.exports{mode:development,devtool: source-map,entry: ./src/index.js,output:{path:path.resolve(__dirname,./dist),filename:bundle.js,publicPath:/},module:{rules:[{test:/\.jsx?$/i,exclude:/node_modules/,use:{loader:babel-loader,options:{presets: [[babel/preset-env],[babel/preset-react]]}}},{test:/\.css$/i,use:[style-loader,css-loader]},{test: /\.vue$/i,use:[vue-loader]}]},devServer:{static:[public,{directory: path.resolve(__dirname,./abc),watch:true}],// 静态文件的位置host:0.0.0.0,// 局域网可以通过ip访问 》 localhost会被解析成127.0.0.1回环地址主机自己发出去的包直接被自己接收port:9000,open:true,compress:true, // 是否为静态文件开启gzipproxy:[{context:[/api],target:http://localhost:8080/,pathRewrite:{^/api:},changeOrigin:true}],historyApiFallback:true},plugins:[new HtmlWebpackPlugin({template:./index.html}),new VueLoaderPlugin()]
}
webpackDevMiddleware
webpack-dev-server默认开启的是 express的服务如果我不想使用express而想使用其他的比如koa可以使用webpack-dev-middleware去定制服务器
通过webpack的配置信息将源代码打包成 一个中间件让服务器引用进去
npm i express webpack-dev-middlewareconst express require(express)
// 引入webpack编译后面的文件
const webpack require(webpack)
const webpackDevMiddleware require(webpack-dev-middleware)const app express()// 加载配置文件 ,,, webpack对这个信息进行编译
const config require(../webpack.config)
const compiler webpack(config)// 将编译之后的对象通过这个webpackDevMiddleware这个中间件去处理 变成express可以使用的中间件
var middleware webpackDevMiddleware(compiler);// 使用这个中间件 webpack会根据配置将源代码进行编译编译完成之后放入express中间件中
app.use(middleware)app.listen(3000,(){console.log(服务器已经开启在3000端口。。。。)
})
webpack的resolve属性
resolve常用的属性
extensions 扩展名解析这里写了之后源文件就不用写后缀名mainFiles : 如果引入的是文件夹他会找这个文件夹下面指定名字的文件然后去拼接上extensions给出的后缀进行解析alias: 别名 resolve:{extensions:[.jsx,.js,.vue],mainFiles:[index,main],alias:{:path.resolve(__dirname,./src)}},gitee:https://gitee.com/water-kid/learn-webpack/tree/main/webpack04
