webpack配置相关

认识webpack:

   - 本质上来讲：webpack是一个现代的javaScript应用的静态模块打包工具。  

     - 前端模块化的一些方案：AMD,  CMD,  CommonJs Es6;  目前我们能用的规范是ES6 ,因为只有es6的规范浏览器才能给我们做一些底层的支持，但是我们用了webpack那么上面所提到的规范都能用；因为webpack 在给我们打包的时候会做一些转换；比如我们用到了CommonJs，那么webpack就会将他转化为浏览器认识的一些方案。

 

   - 而在webpack其中一个核心就是让我们可以进行模块化开发，并会帮助我们处理模块间的依赖关系。

   - 而且不仅仅是javaScript文件，我们的css, 图片， json文件等等在webpack中都可以被当做模块来使用

   - 这就是webpack中模块化的概念。

 

webpack打包如何理解呐：

    -  就是将webpack中的各个资源模块进行打包合并成一个或多个包（Bundle）

    -并且在打包过程中，还可以对资源进行处理，比如：压缩图片， 将scss转化成css  ，将Es6语法转化成Es5语法，将TypeScript转化成JavaScript等等操作

 

webpack的安装：

温馨提示：如果要运行webpack 还得依赖node 环境；所以在安装webpack前得先安装node。因为node.js自带了软件包管理工具npm(直接去官网下载安装就行了)

下载地址：https://nodejs.org/zh-cn/

 

webpack全局安装：

npm install webpack@3.6.0 -g   //版本号可写可不写默认安装的最新版

webpack局部安装：

npm install webpack --save-dev  //局部安装的webpack只能在当前项目中使用  安装完成后会在本地文件中生成一个node-modules
补充：--save-dev表示是；开发时依赖，项目打包后不需要继续使用的

 

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

测试:cnpm -v  如果有出现版本号证明安装成功

 

webpack项目的创建：

1.首先创建一个根文件夹

2.在根文件夹下面创建两个子文件夹（dist:全称:distribution 发布的意思；    src:全称：）

  其中src是写源码的地方；dist是我们打包完成后的文件

3.在src的文件夹创建一个main.js的文件作为整个程序的入口

4.在根目录创建一个webpack.config.js的文件；（注意：这个文件名是固定好的不能随意修改）

  创建这个文件的目的就是为了配置webpack ；

  其中有这几个属性enty:表示webpack 从哪一个文件入口开始打包

                               ouput:将资源打包到哪去；

                               module:这个里面主要配置我们打包所需要的各种loader；比如：style-loader ,css-loader, less-loader等等（注意：这些样式的loader是从右到左进                                              行加载的;顺序一定不能错）

                               plugin:主要是执行我们打包期间的一些优化和压缩

5.前面的工作做完之后;我们还要初始化项目：终端输入：npm init        当执行完毕后还会在根目录生成一个package.json的文件用来存储当前项目中的一些信息；如果项 目想要单独依赖node环境 则必须初始化；如果package.json还有依赖一些东西的话，还要在终端输入npm install他可以帮助我们在当前项目安装一些东西的

6.继续在终端安装webpack输入npm webpack --save-dev(这是本地安装)；当执行完毕后会在根目录生成一个node_modules的文件夹

   如果在本地执行打包还必须安装脚手架输入：npm install webpack-cli --save-dev ；并且在package.json脚本中定义；然后在终端执行打包命令：npm run build

 

下面展示的是配置里的一下代码：

温馨提示：下面代码中出现的loader和plugin(插件) 都需要在终端安装

 

const {resolve} = require("path");//导入动态获取路径的node包
const HtmlWebpackPlugin = require('html-webpack-plugin')//打包html插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')//打包vue插件
const webpack = require('webpack')//设置版权插件
module.exports = {
  entry:"./src/main.js",
  output:{
    path:resolve(__dirname,'dist'),  //动态获取路径;其中resolve的作用是拼接路径；
    filename:"bundle.js",  //最终打包成功后的文件名；将其引入到html中去
    // publicPath:"dist/" //配置url当前路径（我的没报错就没配置）
  },
  module:{
    rules:[
      {test:/\.less$/,
      use:['style-loader','css-loader','less-loader']
      },


      //css-loader只负责将css文件进行加载
      //style-loader是负责将样式添加到DOM当中
      //使用多个loader时，是从右往左
      {
       test:/\.css$/,
       use:['style-loader','css-loader']
      },

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片，小于limit时，会将图片编译成base64字符串形式
              //当加载的图片，大于limit时，要使用file-loader进行加载
              limit: 3800,
              name:'image/[name].[hash:8].[ext]' //配置获取图片名称
            },
          }
        ]
      },
      {//exclude(译：排除)；include(译：包含)
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    //alias(译：别名)
    // extensions:['.js','.css','.vue'],//表示调用文件时需要省去的后缀
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins:[
      new HtmlWebpackPlugin({
        template:'./src/index.html'
      }),
      new VueLoaderPlugin(),
      new webpack.BannerPlugin('最终版权归白头翁')
  ],
  mode: "development",
};