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:

 

　　

跟他相配的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报错的情况（链接）

转载于:https://www.cnblogs.com/xiaochongchong/p/7814479.html