Webpack配置

参考地址：https://www.jianshu.com/p/42e11515c10f

一、什么是Webpack

　　前端构建工具 ；目的就是把有依赖关系的各种文件，打包成一系列的静态资源。

　　主要是为了更好的适配大型单页面应用程序开发(SPA)。

       webpack可以使其代码分离，按需加载。以及静态资源模块化无缝结合。

　　webpack简单点来说就是一个配置文件，所有的黑魔法都是在这一个文件中发生的。 这个配置文件主要可以分为以下几个模块:

　　1、entry(入口文件)

　　

　　2、output(出口)

　　

　　3、module(模块)

　　

　　在webpack中一切皆Module模块。

　　比如 :我们在项目中需要引用.json文件，只需配置一个json-loader即可。引用相关的jquery插件，配置一个imports-loader即可...然后在页面中可以通过require方式 或者 ES6语法import直接引入就好。

　　4、plugins 插件

　　

　　比如:html模板,CSS行内样式提取器,热加载....

　　

二、webpack能帮我们做什么?

  1、代码分割,按需加载。

  2、图片自动转成base64。

  3、自动打包编译压缩混淆,添加md5..

使用Vue.js来搭建一个SPA单页。那么可能你的Webpack配置如下：

var webpack = require("webpack");

var path = require('path');// NodeJS中的Path对象,用于处理目录的对象,提高开发效率。

var HtmlWebpackPlugin = require('html-webpack-plugin');//webpack html模板插件

var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css提取插件

var CopyWebpackPlugin = require('copy-webpack-plugin');//复制文件

var CleanPlugin = require('clean-webpack-plugin')//webpack插件,用于清除目录文件

var production = process.env.NODE_ENV;

module.exports = {

    // 入口文件地址

    entry:{

        index : ['./src/main.js']

    },

    // 输出

    output: {

        path: path.resolve(__dirname, './dist'), //入口文件的输出地址

        filename: production ? 'js/[name].[hash:8].js' : '[name].js',

        //[name]这里是webpack提供的根据路口文件自动生成的名字

        publicPath: ""//静态资源在server服务上和打包输出的地址

    },

    resolve: {

         //设置require或import的时候可以不需要带后缀

        extensions: ['', '.js', '.vue', '.scss', '.less', '.css']

    },

    // 服务器配置相关,自动刷新!

    devServer: {

        historyApiFallback: true,

        hot: true,

        inline: true,

        port: 8010//端口

        //contentBase: path.join(__dirname, '/dist/view/')//配置网站根目录

    },

    // 加载器

    module: {

        // 加载器

        loaders: [

            {

                test: /.vue$/,

                loader: 'vue'

            },

            {

                test: /.css$/,

                loader: ExtractTextPlugin.extract("style","css")

            },

            {

                test: /.scss$/,

                loader: ExtractTextPlugin.extract("style-loader", "css!sass")

            },

            {

                test: /.js$/,

                loader: 'babel',

                exclude: /node_modules/

            },

            {

                test: /.json$/,

                loader: 'json'

            },

            {

                test: /.(png|jpg|gif|svg)$/,

                loader: 'file',

                query: {

                    limit: 8000,

                    name: '../images/[name].[ext]?[hash:4]'

                }

            },

            {

                test: /.(woff|woff2|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,

                loader: 'file-loader?name=./fonts/[name].[ext]'

            }

        ]

    },

    vue: {

        loaders: {

            css: 'style!css!autoprefixer',

        }

    },

    // 转化成es5的语法

    babel: {

        presets: ['es2015'],

        plugins: ['transform-runtime']

    },

    plugins: [

        new webpack.ProvidePlugin({ //全局配置加载

           "$": "jquery",

           "jQuery": "jquery",

           "window.jQuery": "jquery"

        }),

        new CleanPlugin(['dist']),

        new ExtractTextPlugin(production ? "./css/[name].[hash:8].css" : "./css/[name].css"),

        //单独使用link标签加载css并设置路径,相对于output配置中的publickPath

        new HtmlWebpackPlugin({

            title: 'vue-webpack-test',

            //favicon: './src/img/favicon.ico', //favicon路径,通过webpack引入同时可以生成hash值

            filename: './index.html', //生成的html存放路径,相对于path

            template: './src/view/index.html', //html模板路径

            inject: true, //允许插件修改哪些内容,包括head与body

            //hash: true, //为静态资源生成hash值

            cache:false,//是否缓存

            //chunks: ['main'],//需要引入的chunk,不配置就会引入所有页面的资源

            minify: { //压缩HTML文件

                removeComments: true, //移除HTML中的注释

                collapseWhitespace: false //删除空白符与换行符

            }

        }),

        new webpack.HotModuleReplacementPlugin(),//热加载

        new webpack.optimize.OccurenceOrderPlugin(),

        //复制文件,输出路径相对应path

        new CopyWebpackPlugin([

            {from: 'src/images', to: '/images'},

            {from: 'src/css', to: '/css'}

        ])

    ],

    //添加了此项,则表明从外部引入,内部不会打包合并进去

    externals: {

        jquery: 'window.jQuery'

    },

    // 开启source-map,webpack有多种source-map,在官网文档可以查到

    devtool: '#eval-source-map'

};

//判断为生产模式,压缩js

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 webpack.DefinePlugin({

      'process.env': {

        NODE_ENV: '"production"'

      }

    }),

    new webpack.optimize.UglifyJsPlugin({

      compress: {

        warnings: false

      }

    }),

    new webpack.optimize.OccurenceOrderPlugin()

  ])

}

 

 

从最开始的编码，到打包、测试、上线等一整套流程。开启自己的项目工程吧！