element-ui按需引入

{
  "name": "vue-test2",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "axios": "^0.17.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-component": "^0.10.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "copy-webpack-plugin": "^4.2.0",
    "cross-env": "^5.0.5",
    "crypto-js": "^3.1.9-1",
    "css-loader": "^0.28.7",
    "element-ui": "^2.0.2",
    "file-loader": "^1.1.4",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "qs": "^6.5.1",
    "style-loader": "^0.19.0",
    "vue-awesome-swiper": "^2.6.7",
    "vue-axios": "^2.0.2",
    "vue-loader": "^13.0.5",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

用的vue-cli（webpack-simple）生成的項目，在引入element-ui（餓了么的vue UI框架）的時候，第一次用的完整引入，沒有問題。
第二次嘗試用按需引入，結果發現了問題:
vue-cli（webpack-simple）生成的項目沒有.babelrc文件。按照官網的例子，是在.babelrc寫入配置。那么，，我們是不是需要建立一個這樣的文件呢？
其實是沒必要的，babel是可以單獨運行的，當我們在結合webpack用的時候，babel就是webpack里的一個loader:babel-loader，在webpack.config.js里找到處理js的babel-loader，然后這么寫：

{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:[
'syntax-dynamic-import',
["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]]
]
},
exclude: /node_modules/
},

　　

注意，最新的webpack支持的是options，以前好像是query.'syntax-dynamic-import'是vue-router按需加載的，具體參見上篇博客，如果你沒用到vue-router按需加載，可以不寫。
因為我們用到了babel-loader的插件，我們這里要安裝babel-plugin-component：

npm install babel-plugin-component --save-dev

好了，至此，按需引入element-ui就沒問題了，而且我們沒有再創建個.babelrc。
element-ui目前的版本是2.0.3。如果你翻開1.4.9的版本，他的配置中styleLibraryName是 "theme-default"，如果配成這樣，會報錯：

Can't resolve 'element-ui/lib/theme-default/base.css' 

很可惜，網上能搜到的大部分的博客代碼還是以前的版本配置，所以，還是以官網為准啊

最后，用vue-cli（webpack-simple）生成項目是為了避免我們自己去搞一些麻煩的配置，但事實上，我們在做項目的過程中，不斷引入新的東西（主要是新框架，新特性），發現有即使用了vue的腳手架工具，還是免不了配置，這也是沒有辦法的事情，希望多看看webpack的配置吧。
我目前用的的vue-cli（webpack-simple）webpack.config.js配置，貼出來給大家分享：

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './build/dist/js/'),//PRD
        publicPath: 'dist/js/',//DEV
        filename: 'build.js',
        //filename:'[name].js',
        chunkFilename:'chunkjs/[name].js'//拼接publicPath
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                use:[{
                    loader: 'babel-loader',
                    options:{
                        // presets:['es2015'],//生產環境需要用webpack.optimize.UglifyJsPlugin，寫在這里不起作用，必須在.babelrc
                        plugins:[
                            'syntax-dynamic-import',
                            ["component", [
                                {
                                    "libraryName": "element-ui",
                                    "styleLibraryName": "theme-chalk"
                                }
                            ]]
                        ]
                    },
                }],
                exclude: /node_modules/
            },
            {
                // test: /\.(png|jpg|gif|svg|TTF|ttf|woff)$/,
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            },
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    devServer: {
        port: '8083',
        disableHostCheck: true,
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    // devtool: '#eval-source-map'
    devtool:'inline-source-map'
};

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new CleanWebpackPlugin(['build']),
        new webpack.DefinePlugin({
            'process.env': '"prd"'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),//為vue做的變量，其實應該和上面的合並。
        //由於webpack3.0以上把插件集合在webpack上，有點問題
        new webpack.optimize.UglifyJsPlugin({
            // sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),//webpock3 Scope Hoisting：作用域提升
        //兼容老的loader
        new webpack.LoaderOptionsPlugin({
            minimize: true
        }),
        // new CopyWebpackPlugin([{
        //     from: './index.html',
        //     to:path.resolve(__dirname, './build/')//這樣就可以不用修改任何東西，prd直接發build的東西了
        // }]),
        //廢棄CopyWebpackPlugin的方式，用HtmlWebpackPlugin這個插件
        new HtmlWebpackPlugin({
            title:'rd平台',
            template: './index.html', // 源模板文件
            filename: '../../index.html', // 輸出文件【注意：這里的根路徑是module.exports.output.path】
            showErrors: true,
            inject: false,//不插入生成的 js 文件，只是單純的生成一個 html 文件
            hash: true
        })
    ])
}else{
    //開發環境
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': '"dev"'
        })
    ])
}

最后還是沒逃過.babelrc,因為webpack3把UglifyJs這個插件集成在webpack里了，不需要額外引入，但這樣的話，在webpack.config.js里配置es6轉碼就沒用了，就需要.babelrc文件了。

{
   "presets": ["es2015"]
}

index.html:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小小英語版權所有 18621661956</title>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="小小英語版權所有 18621661956">
    </head>
    <body>
    <div id="app">
    	<router-view></router-view>
    </div>
    <script src="./dist/js/build.js"></script>
    </body>
</html>

　　

跟他相配的package.json

{
  "name": "vue-test2",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "axios": "^0.17.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-component": "^0.10.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "copy-webpack-plugin": "^4.2.0",
    "cross-env": "^5.0.5",
    "crypto-js": "^3.1.9-1",
    "css-loader": "^0.28.7",
    "element-ui": "^2.0.2",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "qs": "^6.5.1",
    "style-loader": "^0.19.0",
    "vue-awesome-swiper": "^2.6.7",
    "vue-axios": "^2.0.2",
    "vue-loader": "^13.0.5",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

　　

主要是修改了5個地方：
1.vue-router按需加載（鏈接）
2.element-ui按需引入（本文）
3.加入process.env的全局變量，里面存了當前的開發環境（dev,prd.並沒有test）
4.dev和prd的時候，index.html不變，打包都確保能訪問

5.dev環境下webpack-dev-server在safari報錯的情況（鏈接）