webpack4.29.x成神之路(十) webpack-dev-server下
目录
上节: webpack-dev-server上
上节目录如下:
基本配置
之前devSerer的值是个空对象,用的都是默认配置,比如host:localhost, 端口:8080,这些都可以自定义
修改webpack.config.js:
// 省略 devServer: { host: '0.0.0.0', port: 3306, hot: true }, // 省略
然后重新npm run dev, 这时既可以用localhost:3306,也可以用电脑ip:3306访问。
publicPath
自从使用devServer后,便不像之前那样,每次都访问打包后的bundles目录下的代码,但其实output目录并非不存在,而是在缓存中,只是没有写进磁盘,我们还是可以通过url访问到打包后的代码。
修改配置中output.filename属性
webpack.config.js:
module.exports = { mode: 'production', entry: './src/index.js', output: { filename: '[name].js', path: resolve(__dirname, 'bundles') }, // 开启devServer devServer: { host: '0.0.0.0', port: 3306, hot: true }, module: { rules: [{ test: /\.(gif|jpg|jpeg|png|svg)$/, use: ['url-loader'] }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] }] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new CleanWebpackPlugin(), new webpack.HotModuleReplacementPlugin() ] };
然后重新 npm run dev打开浏览器,应该和上节一样:
这是输入网址:localhost:3306/main.js,应该能访问到打包后的main.js:
ps: 为什么是main.js? 如果不急得了需要回顾下entry和output噢。
publicPath就是用来修改文件访问路径的,默认值是: '/'。
修改配置,webpack.config.js:
devServer: { host: '0.0.0.0', port: 3306, hot: true, publicPath: '/assets/' },
重新 npm run dev, 这时的访问路径就变成了localhost:3306/assets/main.js
HTML5 History API
当访问一个不存在路径比如:
如果想让所有的404请求的重定向到index.html,就需要配置historyApiFallback
webpack.config.js:
// 省略 devServer: { host: '0.0.0.0', port: 3306, hot: true, // publicPath: '/assets/' historyApiFallback: true }, // 省略
重新 npm run dev, 然后随便访问个不存在的路径都会重定向到index.html
还可以用正则做精确匹配,比如:
// 省略 devServer: { host: '0.0.0.0', port: 3306, hot: true, // publicPath: '/assets/' // historyApiFallback: true historyApiFallback: { rewrites: [ { from: /^\/$/, to: '/views/landing.html' }, // 根路径/ => /views/landing.html { from: /^\/subpage/, to: '/views/subpage.html' }, // /subpage => /views/subpage.html { from: /./, to: '/views/404.html' } ] } }, // 省略
proxy处理跨域
利用devServer的proxy属性可轻松在开发阶段解决跨域问题
修改src/index.js:
// 请求接口 fetch('https://api-m.mtime.cn/Showtime/LocationMovies.api').then(res => { console.log('res :', res); });
然后npm run dev,打开f12 应该会看到典型的跨域错误:
修改配置,webpack.config.js:
// 省略 devServer: { host: '0.0.0.0', port: 3306, hot: true, // publicPath: '/assets/' historyApiFallback: true, proxy: { '/Showtime': { target: 'https://api-m.mtime.cn', changeOrigin: true } } }, // 省略
修改src/index.js:
fetch('/Showtime/LocationMovies.api').then(res => { console.log('res :', res); });
重新npm run dev, 就能请求到数据咯
proxy配置很多,还可以设置拦截器,比如:
// 省略 devServer: { host: '0.0.0.0', port: 3306, hot: true, // publicPath: '/assets/' historyApiFallback: true, proxy: { '/Showtime': { target: 'https://api-m.mtime.cn', changeOrigin: true } }, // 拦截器 bypass: function (req, res, proxyOptions) { if (req.headers.accept.indexOf("html") !== -1) { console.log("Skipping proxy for browser request."); return "/index.html"; } } }, // 省略
详细用法参考:https://github.com/chimurai/h...
下节:babel编译es6
相关推荐
安装 webpack-dev-server --> 配置devServer字段 --> 利用命令行开启服务。"test": "echo \"Error: no test specified\"