webpackes6过滤

1. 为什么采用vue webpack es6模式开发

因为webpack可以直接打包es6语法在浏览器中运行，不然的话es6语法无法在浏览器中运行

2. 如何使用webpack来打包ES6的代码

这种配置方式和你的可能有点不同，仅作参考 dev.config.js部分 var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixer = require('autoprefixer'...

3. 如何使用webpack打包ES6的Nodejs后台程序

这种配置方式和你的可能有点不同，仅作参考 dev.config.js部分 var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixer = require('autoprefixer'.

4. 利用webpack将es6代码转换，怎么在浏览器运行

说得通俗点，就相当一个编译器，把你写的jquery代码转换成js代码，然后让浏览器运行。就象php代码或者jsp代码，浏览器直接运行不了，得通过编译器来解析，生成纯html代码让浏览器运行。所以如果不引用就用不了jquery代码

5. webpack安装babel的es6 loader 的开发依赖时报了一堆的错是为什么

1.准备:
npm安装以下组件

a.安装react/antd:
npm install react react-dom antd --save

b.安装webpack/less:
npm install webpack less --save-dev

webpack根据需要选择使用-g安装

c.安装babel-loader以及其他相关package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev

d.选择安装style-loader/css-loader
npm install style-loader css-loader --save-dev

2. 配置webpack.config.js
具体配置可以查看webpack提供的例子，主要依赖的是babel-loader
babel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader

3. 编写我们的文件(例如: demo-antd.jsx)
只使用了antd提供的Button组件。只使用了antd提供的Button组件。
ps: 对比
import { Button } from 'antd';

和
import Button from 'antd/lib/button';

后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。

4. 执行构建
webpack ./demo-antd.jsx demo-antd-bundle.js

将生成demo-antd-bundle.js文件

5. 在页面中引入bundle文件(demo-antd-bundle.js)

执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。

这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。

因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。

6. webpack.config.js支持es6吗

支持。es6就是一种js规范，只用浏览器支持就支持的。很多项目
webpack.config.js都是分开写的，因为配置文件很多，所以一样是用了import 箭头函数拉之类的es6方法。

7. 通过webpack，可以直接使用es6，用考虑兼容吗

研究react的时候也考虑过这个问题，首先可以先了解下这两种模块的机制。参考这里 要考虑的点： 目前Commonjs是nodejs(浏览器环境需要模块加载器)原生支持的，而es6需要借助babeljs来实现。意味着如果要实现自动编译上线(我司没有在线上安装nod

8. 利用webpack将es6代码转换，怎么在浏览器运行

output出来的bundle.js直接拿来用就可以了。你这是把编译完的代码直接复制出来用吗？没有模块系统啊。webpack最后打包出来的的模块都是黑魔法模拟的，一个bundle里分出来的模块。

9. React+es6下的webpack.config.js怎么写

这种配置方式和你的可能有点不同，仅作参考

dev.config.js部分

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer');

var csswring = require('csswring');

mole.exports = {

devtool: 'cheap-mole-eval-source-map',

entry: [

'webpack-hot-middleware/client',

'./src/index',

],

output: {

filename: 'bundle.js',

path: path.join(__dirname, '/dist/'),

publicPath: '/dist/',

},

plugins: [

new webpack.DefinePlugin({

__DEVELOPMENT__: true

}),

new ExtractTextPlugin('bundle.css'),

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.HotMoleReplacementPlugin(),

new webpack.NoErrorsPlugin(),

new webpack.ProvidePlugin({

jQuery: 'jquery',

}),

],

resolve: {

extensions: ['', '.jsx', '.js', '.json'],

molesDirectories: ['node_moles', 'src'],

},

mole: {

loaders: [{

test: /bootstrap/js//,

loader: 'imports?jQuery=jquery',

}, {

test: /.woff(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff',

}, {

test: /.woff2(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff2',

}, {

test: /.ttf(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/octet-stream',

}, {

test: /.otf(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-otf',

}, {

test: /.eot(?v=d+.d+.d+)?$/,

loader: 'file',

}, {

test: /.svg(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=image/svg+xml',

}, {

test: /.js$/,

loaders: ['react-hot', 'babel?stage=0&loose[]=es6.moles'],

exclude: /node_moles/,

}, {

test: /.scss$/,

loader: 'css?localIdentName=[path]!postcss-loader!sass',

}, {

test: /.png$/,

loader: 'file?name=[name].[ext]',

}, {

test: /.jpg$/,

loader: 'file?name=[name].[ext]',

}],

},

postcss: function() {

return [autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }), csswring];

},

};

prod.config,js部分

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer');

var csswring = require('csswring');

mole.exports = {

devtool: 'source-map',

entry: [

'./src/index',

],

output: {

filename: 'bundle.js',

path: path.join(__dirname, '../dist/'),

publicPath: 'dist/',

},

plugins: [

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"proction"',

},

__DEVELOPMENT__: false,

}),

new ExtractTextPlugin('bundle.css'),

new webpack.optimize.DepePlugin(),

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false,

},

}),

new webpack.ProvidePlugin({

jQuery: 'jquery',

}),

],

resolve: {

extensions: ['', '.jsx', '.js', '.json'],

molesDirectories: ['node_moles', 'src'],

},

mole: {

loaders: [{

test: /bootstrap/js//,

loader: 'imports?jQuery=jquery',

}, {

test: /.woff(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff',

}, {

test: /.woff2(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff2',

}, {

test: /.ttf(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/octet-stream',

}, {

test: /.otf(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-otf',

}, {

test: /.eot(?v=d+.d+.d+)?$/,

loader: 'file',

}, {

test: /.svg(?v=d+.d+.d+)?$/,

loader: 'url?limit=10000&mimetype=image/svg+xml',

}, {

test: /.js$/,

loaders: ['react-hot', 'babel?stage=0&loose[]=es6.moles'],

exclude: /node_moles/,

}, {

test: /.scss$/,

loader: 'css!postcss-loader!sass',

}, {

test: /.png$/,

loader: 'file?name=[name].[ext]',

}, {

test: /.jpg$/,

loader: 'file?name=[name].[ext]',

}],

},

postcss: function() {

return [autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }), csswring];

},

};

10. webpack react es6为什么需要手动刷新浏览器

实现修改代码自动刷新浏览器，需要添加相关插件，webpack提供了2种热更新的办法

1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。

2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。

或者可以参考我写的热更新demo

https://github.com/hyy1115/react-rex-book