参考地址：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() ]) } 从最开始的编码，到打包、测试、上线等一整套流程。开启自己的项目工程吧！
转载于:https://www.cnblogs.com/sun-web/p/8335486.html
