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