webpack-dev-server提示not cacheable无法热更新;内附配置;
1.我的问题;
使用antd-mobile做项目,之前用antd时配置的webpack都没问题。然而到了mobile里面加载了几个必须,第一.svg的使用配置,第二.按需加载的依赖,第三.分离mobile的rn和web模式;
以上只修改了这几个配置点;
现在使用webpack-dev-server --inline --hot 时就报错我写的js not cacheable;但是可以访问到目标页面。只是无法热更新了;
2.webpack配置;
高级配置还不会,暂时就用到这些;
const webpack = require('webpack');
const path = require('path');
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
context: __dirname + '/src',
entry: './js/root.js',
resolve: {
modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
extensions: ['.web.js', '', '.jsx', '.js', '.json']
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
plugins: [
'external-helpers',
["transform-runtime", {polyfill: false}],
["import", [{ "style": "css", "libraryName": "antd" },{"style": "css", "libraryName": "antd-mobile"}]]
],
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/i,
loader: 'style-loader!less-loader',
},
{
test: /\.(svg)$/i,
loader: 'svg-sprite-loader',
include: [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
// path.resolve(__dirname, '.src/my-svg'), // 自己私人的 svg 存放目录
]},]
},
postcss: [
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
}),
pxtorem({ rootValue: 100, propWhiteList: [] })
],
output: { //输出位置;
path: __dirname + '/src/',//路径;
filename: 'bundle.js'
}
}
报错:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论