webpack的各种配置

1.在根目录下

   新建一个src文件夹和dist文件

   新建一个index.html

   在src文件夹下新建main.js

2.初始化npm

  npm init

3.安装webpack 3.6.0版本（方便跟着学习）

  cnpm install webpack@3.6.0 --save-dev

4.在根目录下新建webpack.config.js配置webpack

  const path=require('path');

  module.exports={

      entry:path.resolve(__dirname,"src/main.js"),

      output:{

          path:path.resolve(__dirname,"dist"),

          filename:"test.js"

      }

  }

5.在package.json中配置script

    "scripts": {

      "test": "echo \"Error: no test specified\" && exit 1",

      "build":"webpack"

    },

-----------各种loader-------------------

一.webpack 实现加载css 和解析 css

   1.安装css-loader  和 style-loader

     cnpm install css-loader style-loader --save-dev

     注意：css-loader的版本太高问题（^3.6.0）

   2.在webpack中添加对.css文件的解析

      const path=require('path');

      module.exports={

          entry:path.resolve(__dirname,"src/main.js"),

          output:{

              path:path.resolve(__dirname,"dist"),

              filename:"test.js"

          },

          module:{

              rules:[

                  {

                      test:/\.css$/,

                      use:['style-loader','css-loader']

                  }

              ]

          }

      }

二.webpack实现对vue的解析

  1.安装vue-loader 和 vue-template-compiler

    cnpm install vue-loader vue-template-compiler --save-dev

  2.在webpack中配置对vue的解析

        module:{

          rules:[

              {

                  test:/\.css$/,

                  use:['style-loader','css-loader']

              },

              {

                  test:/\.vue$/,

                  use:['vue-loader']

              }

          ]

      }

三.安装vue

   1.安装vue

     cnpm install vue --save

   2.使用带模板编译的vue,在webpack中设置一个别名指向vue.esm.js

        resolve:{

          alias:{

              "vue$":"vue/dist/vue.esm.js"

          }

      }

    3.注意：vue-loader版本太高问题，"vue-loader": "^13.7.3"

四.vue实例中el 和 template的区别

   如果同时有el和template时，template会替换el

 -------------webpack插件的使用--------------

一.添加版权的plugin

   插件是webpack自带的bannerPlugin

   const webpack=require('webpack');

   ...

    plugins:[

        new webpack.BannerPlugin("版权横幅插件的使用！")

    ]

二.使用htmlWebpackPlugin插件自动在dist文件夹生成index.html

  1.安装插件

    cnpm install html-webpack-plugin@3.2.0 --save-dev

  2.在webpack.config.js中配置

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

    plugins:[

        new webpack.BannerPlugin("版权横幅插件的使用！"),

        new htmlwebpackplugin({

            template:"index.html"

        })

    ]

三.使用uglifyjs-webpack-plugin插件丑化代码(压缩)

   1.安装插件

     cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

   2.在webpack.config.js中配置

     const uglifyjs=require('uglifyjs-webpack-plugin')

     plugins:[

        new webpack.BannerPlugin("版权横幅插件的使用！"),

        new htmlwebpackplugin({

            template:"index.html"

        }),

        new uglifyjs()

    ]

---------------webpack-dev-server搭建本地服务器-------------------------

1.安装

  npm install webpack-dev-server@2.9.1 --save-dev

2.在webpack中配置使用

  devServer:{

    contentBase:"./dist",

    inline:true

  }

3.在package.json的脚本中添加一行

  "server":"webpack-dev-server"

  "server":"webpack-dev-server --open" 运行后自动打开浏览器访问

4.使用。在终端 npm run server 运行本地服务器

   按 ctrl+c 关闭 服务器