webpack-安装和使用Vue的配置过程

一、webpack安装

安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm
1. 查看自己的node版本

   node -v

2.全局安装webpack(这里可以指定版本号3.6.0,因为vue cli2依赖该版本)

  npm install webpack@3.6.0 -g

3.局部安装webpack(后续才需要)
–save-dev是开发是依赖,项目打包后不需要继续使用的

 npm install webpack@3.6.0 --save-dev

4. 为什么全局安装后,还需要局部安装

 在终端直接执行webpack命令,使用的全局安装的webpack
 当在package.json中定义了script是,其中包含了webpack命令,那么使用的是局部webpack

const path=require('path')
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },

5.webpack中使用css配置

     index.js中导入依赖 require('./css/normal.css')
       npm install css-loader style-loader --save-dev
       npm install style-loader css-loader -D

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

6.webpack中使用less配置

index.js中导入依赖require('./css/special.less')
   npm install less-loader -D
   npm install less -D
     {
                   test: /\.less$/,
                   loader: "style-loader!css-loader!less-loader",
               },

7. webpack中图片文件的处理

 normal.css—— background: url("../img/test.jpg");
   npm install --save-dev url-loader
   如果图片比limit大的话
   npm install file-loader --save-dev
   然后在webpack.config.js里面output下加上:
      publicPath: "dist/"
  注意:--save-dev写前后都没有关系

       {
      test:/\.(png|jpg|gif|jpeg)$/,
          use:[
              {
                  loader:'url-loader',
                  options: {
                      //当加载的图片,小于limit时,会将图片编译成base64字符串模式
                      //当加载的图片,大于limit时,需要使用file-loader模块进行加载
                      limit:13000
                  }
              }
          ]
  }

8.图片文件处理——修改文件名称

   我们可以在options中添加上如下选项
     img:文件要打包到的文件夹
     name:获取图片原来的名字,放在该位置
     hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位
     ext(extension):使用图片原来的扩展名
   name:'img/[name].[hash:8].[ext]'
  但是图片并没有显示出来,这是因为图片使用的路径不正确
     (1)默认情况下,webpack会将生成的路径直接返回给使用者
     (2)但是,我们整个程序打包在dist文件夹下的,所以这里我们需要在路径下再添加一个dist/

二、webpack-使用Vue的配置过程

1.引入vue.js
如何在webpack环境中集成Vue.js
需要先进行安装对其所有依赖
注:因为后续是在实际项目中也会使用vue的,所以并不是开发时月以来

npm install vue --save

2.使用Vue进行开发
1.runtime-only——代码中,不可以有任何的template
2.runtime-compiler——代码中,可以有template,因为有compiler可以用于编译template

   {
                    test: /\.js$/,
                    //exclude——排除
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            //preset——配置
                            presets: ['es2015']
                        }
                    }
                },
           resolve: {
                 //alias:别名
                 alias: {
                     //$——结尾的意思
                     'vue$':'vue/dist/vue.esm.js'
                 }
             }

 之后再 npm install

3…vue文件封装处理
安装vue-loader和vue-template-compiler

 (1).npm install vue-loader vue-template-compiler --save-dev

  (2).      {
                  test: /\.js$/,
                  //exclude——排除
                  exclude: /(node_modules|bower_components)/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          //preset——配置
                          presets: ['es2015']
                      }
                  }
              },
              {
                  test: /\.vue$/,
                  use: {
                      loader: 'vue-loader',
                  }
              }
  (3).package.json里面——  "vue-loader": "^13.0.0",
       npm install 更新一下

组件省略后缀，可以在webpack.config.js里面的resolve下加上
extensions: [’.js’,’.css’,’.vue’],即可