webpack.config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    // 入口文件配置

    // 值为：对象/字符串

    // entry: './src/main.js',

    entry: {

        //key： 为输出时的文件名字

        // value： 为文件路径

        main: './src/main.js'

    },

    // 输出文件配置

    output: {

        path: __dirname+'/dist',

        //[hash:20] 随机的数。保证名字不同，防止服务器的缓存

        // filename: '[name].[hash:20].js'

        filename: '[name].js'

    },

    //动态的加载script标签

 

    //处理模板

    cnpm install html-webpack-plugin -D

 

    plugins: [

        new HtmlWebpackPlugin({

            //作用的文件

            template: './index.html',

            //输出的文件

            filename: 'index.html'

        })

    ],

    module: {

        //配置文件编译的规则

        rules: [

            //编译es6语法

 

            使用babel-loader

            cnpm install babel-loader babel-core -D

            只能解析基本的语法，方法，函数不能实现

            {

                test: /.js$/,//需要编译的文件路径的匹配规则

                exclude: /node_modules/, //除去的文件路径

                loader: 'babel-loader',

                //babel-loader的配置

                /*

                options: {

                    //预设

                    es6的函数和方法不能编译：  

                    （所用的es6在编译时，会提供方法转换， 适用于开发项目，框架）

                    cnpm install babel-plugin-transform-runtime -D

                    cnpm install babel-runtime -S

                    代码中用到了什么方法就会插入es5的方法

 

 

                    presets: [

                        // 'env'

                        //如果预设的单独一项配置，配置为数组

                        // 第一个值为预设名字

                        // 第二个值为这个预设的配置

                        ['env', {

                            target: {

                                browsers: ['>1%', 'last 2 versions']

                            }

                        }]

                        //react用下面这个，别的用上面的

                        ['env', "react"]

                    ],

                     plugins: [

                        "transform-runtime"

                    ]

                }

                */

            },

            解析vue成js           

            安装vue

            cnpm install vue vue-router vuex -S

            cnpm install vue-loader -D(安装完之后注检查依赖模块是否安装)

 

            {

                test: /.vue$/,

                loader: 'vue-loader'

            },

 

            //编译css

            cnpm install css-loader style-loader -D

 

            {

                test: /.css$/,

                loader: 'style-loader!css-loader'

            },

 

            //编译其他文件(png gif  jpeg jpg  ttf )

            url-loader

            cnpm install url-loader -D

 

            {

                test: /.(png|jpeg|jpg|ttf|gif)/,

                loader: 'url-loader'

            }

 

        ]

    }

}

 

代码依赖

{
"name": "vue-pro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --config webpack.config.dev.js --open",
"build": "webpack --progress -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",

　　"babel-preset-react": "^6.24.1",

"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.5.16",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"babel-runtime": "^6.26.0",

    "react": "^16.3.2",

    "react-dom": "^16.3.2",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}

    "dev": "webpack-dev-server --config webpack.config.dev.js --open --port 9090 --host 10.36.136.170 --progress",//显示进度条

https://www.jianshu.com/p/1a775dcfe957    插件文章

https://cloud.tencent.com/developer/article/1356611

plugin

• define-plugin：定义环境变量
• commons-chunk-plugin：提取node包中引入的代码
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
• html-webpack-plugin 为html文件中引入的外部资源，可以生成创建html入口文件
• clean-webpack-plugin：删除打包文件
• happypack：实现多线程加速编译
• extract-text-webpack-plugin 吧css从js中提取出来
• optimize-css-assets-webpack-plugin 优化压缩css
• imagemin-webapack-plugin 图片压缩
• copy-webpack-plugin 静态文件拷贝到dist文件夹