webpack是一款强大的加载器兼打包工具，它能把各种资源，例如JS（包含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理，优势如下：

1.webpack是以commonJS的形式来书写，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移2.能不能能不能能不能被模块化的不仅仅是js，还包括各种资源文件3.开发便捷，能替代部分gulp的工作，比如打包、混淆压缩、图片转base64等4.扩展性强，插件机制完善，特别是支持React热插拔

下载依赖 webpack解析包 和服务

npm install webpack --save-dev复制代码

使用webpack配置文件

• 初始化git

  mkdir webpack-demoscd webpack-demosgit init复制代码

• 初始化项目

  npm init -y复制代码

• 增加 .gitignore
  • 创建文件

    touch.gitignore复制代码

  • 在文件中增加以下内容

    node_modules.idealib复制代码

• 在项目根目录下创建src和build目录

  src目录存放源码，build目录存放编译打包之后的资源

  mkdir src build复制代码

• 创建webpack的配置文件

  touch webpack.config.js复制代码

  配置webpack.config.js

  //webpack 必须采用common.js写法let path=require('path'); //node里专门处理路径用的，以当前路径解析出一个相对路径let HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={  entry:'./src/main.js',//打包的入口文件，webpack会自动查找相关的依赖进行打包,当多个文件的时候用对象 entry:{main:'./src/main.js',main2:'./src/main2.js'},下面的filename:[name].js  output: {      filename: "bundle.js" ,//打包后的文件名字      path:path.resolve('./dist'), //dist必须是一个绝对路径 引入path路径 然后通过path.resolve('./dist')方法解析出一个绝对路径  },//    模块的解析规则 - js 匹配所有的js 用babel-loader转义 排除掉node_modules  module:{      rules:[          {
       test:/\.js$/,use:'babel-loader',exclude:/node_modules/},          //数组里的loader顺序是从右往左写          {
       test:/\.css$/,use:['style-loader','css-loader']},          {
       test:/\.less$/,use:['style-loader','css-loader','less-loader']},          //?limit=8192 转化base64 只在8192字节以下转化，其他情况输出图片 file-loader是 url-loader里面的          {
       test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},          {
       test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},          {
       test:/\.vue$/,use:'vue-loader'}      ]  },  plugins: [  //自动在dist文件夹里生成index.html      new HtmlWebpackPlugin({          template:'./src/index.html', //使用的模板         // filename:'login.html' //产出的文件名字,不写默认就是index.html      })  ]}复制代码

  注意：webpack.config.js这个文件名是定死的，修改了会报错，另外如果不按这个命名，那么在webpack运行的时候 要通过 --config这个参数指定配置文件：比如：webpack --config conf.js

修改package.json

"scripts":{   "build":"webpack" }复制代码

执行命令进行编译

npm run build复制代码

build目录下会新增一个bundle.js文件，里面就存放着打包后的目录

loader

anzhuang loader解析器

添加 .babelrc 文件

内容如下

{    “presets”:["es2015","stage-0"],    "plugins":[]}复制代码

devServer

webpack-dev-server 是一个web服务器，可以预览项目，并且当修改源码后可以实时刷新页面server配置

安装devServer

npm install webpack-dev-server --save-dev复制代码

修改package.json

"scripts":{    "dev":"webpack-dev-server"}复制代码

配置 webpack.config.js

devServer:{    stats:{colors:true}, //显示颜色    port:8080, //端口    contentBase:'build',//指定静态文件的根目录}复制代码

最后一步 执行命令进行启动服务

npm run dev复制代码

启动此服务的时候，编译后的产出文件存放在内存里的，在build目录下看不见，但也不会删除原来已经有的文件

《完》