Webpack热模块更换不使用babel-loader和预置es2015
热模块更换工作没有加载器，另一个加载器，或另一个预设。
但它不能与巴贝尔-装载机和预置的ES2015。es2016工作。预置“env”也有同样的问题。
是否有可能用es2015或ENV替换webpack热模块？
以下是我的文件：
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
}
]
},
plugins: [
new webpack.NamedModulesPlugin()
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
print.js
export default function printMe() {
console.log('Updating print.js...')
}
index.html
<html>
<head>
<title>Output Management</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
package.json
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --inline --hot"
},
...
index.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);
if (module.hot) {
module.hot.accept('./print.js', function() {
console.log('Accepting the updated printMe module!');
document.body.removeChild(element);
element = component(); // Re-render the "component" to update the click handler
document.body.appendChild(element);
})
}
.巴贝尔c
{ "presets": ["es2015"] }
共有1个答案
找到解决办法了。
将此放入.babelrc中，禁用模块语法转换。
{ "presets": [['es2015', { modules: false }]] }
-
本文向大家介绍webpack使用 babel-loader 转换 ES6代码示例，包括了webpack使用 babel-loader 转换 ES6代码示例的使用技巧和注意事项，需要的朋友参考一下 本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下： 查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com （一）安装
-
我有一个小应用程序运行在WebpackDev服务器上（在dev环境上）。 热模块替换运行良好，我可以在编辑js文件时动态查看我的更改。 但只要我在babel loader配置中添加es2015预设，它就会停止工作！ webpack.config.js： src/index.js文件： 组成部分js . babelrc 一旦我替换 通过 热模块更换功能停止工作...这里有人有线索吗？ （也请毫不犹豫
-
我正在静态站点上使用本机es6模块。 在部署之前，我通过Babel传递js文件 //网页包。配置。js //. babelrc 默认情况下，babel会将模块转换为公共js，尽管我的代码中有一个标志“modules”：false。巴别塔 我不想让babel把模块变成通用的，我只想把除了导入和导出之外的所有东西都变成es2015，这样我就可以在浏览器中使用原生模块了 像这样：//main.js之前
-
问题内容： 尝试使用Webpack4和Babel7构建React应用时，我遇到以下错误。 ./src/index.js中的错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：错误：无法从’/ Users / me / Desktop /找到模块’babel-preset-react’ reflask’-如果要解析“ react”，请使用“ mo
-
在尝试用Webpack4和Babel7构建react应用程序时，我遇到了以下错误。 ./src/index.js模块生成失败（来自./node_modules/babel-loader/lib/index.js）：错误：从“/users/me/desktop/refleask”中找不到模块“babel-preset-react”-如果要解析“react”，请使用“Module：react”-您是说
-
This README is for babel-loader v8 + Babel v7If you are using legacy Babel v6, see the 7.x branch docs Babel Loader This package allows transpiling JavaScript files using Babel and webpack. Note: Issu