webpack是一种各种模块的处理方案，在其作用下，一切皆模块，其主要作用有：
2.webpack的安装和命令行？
在电脑任意位置下，长按shift键，点检打开powerShell窗口，创建测试文件：
mkdir->webpack_study->npm init（项目初始化）->npm install wepack --save-dev(安装并将其保存到package.json文件中)
3.打包语法？
webpack hello.js hello.bundle.js
对打包语句的扩展：
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch ---progress --display-modules --display-reasons
命令解释：
--module-bind（绑定引入的模块）
--watch（监控对应的js文件，一旦变化，自动打包）
--progress（显示打包进度）
--display-modules(显示打包的文件有哪些)
--display-reasons(显示打包原因)
上述的命令太长了，在package.json文件中的script对象中添加一个webpack：“ webpack webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch ---progress --display-modules --display-reasons ”，然后在shell窗口使用npm run webpack就相当于调用了这句命令行；非常简便；别的npm run dev、npm run build同理；
4.建立webpack的基本配置？
在项目中一般会有一个叫webpack.config.js的文件，其中就是保存了webpack的配置；比如：
var path = require('path');
module.exports = {
//设定文件的读取入口
entry: {
main: './src/main.js'
},
//文件的打包后的出口，存放在这里
output: {
path: path.join(__dirname, './build/'), //打包后的存放路径
filename: '[name].bundle.js', //打包后的文件名,在原来的名字后加一个bundle
publicPath: '/todolist/build/' //发布出去的版本的路径，在打包前的路径前加一个这个路径
},
//
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'},
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/},
{ test: /\.scss$/, loader: 'style!css!autoprefixer!sass'},
{ test: /\.(svg|ttf|eot|woff|woff2)(\?.*$|$)/, loader: 'url-loader?importLoaders=1&limit=1000&name=/fonts/[name].[ext]'},
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader'}
]
},
vue: {
loaders: {
css: 'style!css!autoprefixer!sass'
}
},
babel: {
presets: ['es2015'], //全部转为es6的语法
plugins: ['transform-runtime']
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
components: path.join(__dirname, './src/components')
}
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
devtool: '#source-map'
}
5.webpack中的entry和output配置？
entry：配置项目的读取文件入口，如果是单页面项目就只有一个，但是要是多页面项目就有多个；
output：文件打包后输出的位置，名称的配置的地方,配置的选项有三个动态参数[name]/[hash]/[chunkhash],hash是一种MD5的算法，保证每次都是唯一的；
6.自动化生成项目中的HTML页面？
使用webpack的插件html-webpack-plugin;
plugins:[
new htmlWebpackPlugin({
filename:"index-[hash].html",
template:'index.html',
inject:"head"//将打包后的文件插入到head标签中；还可以设置body/true/false
minify:{
removeComments:true, //删除代码注释
collapseWhitespace:true,//删除代码间的空格
}，
excludeChunks:[a,b,c]; //除了a,b,c三个js文件别的都引入
})
]7.通过使用loader，一种加载器的集合的统称？将现阶段浏览器不能识别的语法转为可以识别的？
webpack本身只能识别js文件，但是可以借助各种loader使其可以识别任何文件比如css/img等；
比如：label-loder将es6转为es5语法的；
在打包的时候，可以将css文件通过require("test.css")的语法引入，但是webpack是不是认识的；必须使用css-loader和style-loader才能使其在页面中发生作用；css-loader使webpack可以对css文件进行打包，style-css使打包后的文件通过link标签插入到页面中；
8.webpack可以处理js/css（sass/less）/img/模板文件；
分别的处理方法是:
---未完待续