webpack的基本介绍，scss、less、图片、字体、单文件组件，处理方式。

 webpack

 什么是webpack

 

• webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 webpack安装

• npm install webpack@3.11.0 -g

使用webpack

•  使用命令 `webpack 输入文件路径 打包后文件路径` 即可将一个文件打包成另外一个文件

配置webpack.config.js文件

 

// 引入node中处理路径模块
const path = require('path');
module.exports = {
    // 入口文件配置
    entry: 'XXX',
    // 出口文件配置
    output: {
        // 输入路径，webpack2起都必须是绝对路径
        path: oath.join(__dirname, 'dist'),
        // 输出文件名字
        filename: 'bundle.js'
    }
}

webpack-dev-server使用

 

1. 初始化一个package.json文件
2. 运行 `npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D`
3. 在输出配置中添加 `filename: "bundle.js"`(静态资源在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件)
4. 配置 package.json中script `"dev": "webpack-dev-server --inline --hot --open --port 8090"`
5. 运行 `npm run dev`

webpack处理css文件

 

1. 安装 `npm install css-loader style-loader --save-dev`
2. 在webpack.config.js文件中配置

// 跟entry,output同级
 module: {
    rules: [
      // 配置的是用来解析.css文件的loader(style-loader和css-loader)
      {
        // 1.0 用正则匹配当前访问的文件的后缀名是  .css
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
      }
    ]
  }

webpack 处理css.less文件

 

1. 安装 `npm install less less-loader --save-dev`
2. 在webpack.config.js文件中配置(module 下的 rules 数组里配置)

{ 
    test: /\.less$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'less-loader'
    }]
}

webpack 处理css.scss文件

 

1. 安装`npm install sass-loader node-sass --save-dev`
2. 在webpack.config.js文件中配置(module 下的 rules 数组里配置)

{
    test: /\.scss$/,
    use: [{
        loader: 'style-loader'
    }, {
        loader: 'css-loader'
    }, {
        loader: 'sass-loader'
    }]
}

webpack处理图片，字体

 

1. 安装 `npm install file-loader url-loader --save-dev`
2. 在webpack.config.js文件中配置(module 下的 rules 数组里配置)

 {
 //设置对应的后缀即可
    test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
    use: [{
        loader: 'url-loader',
        options: {
          // limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
            limit: 50000
        }
    }]
}

webpack处理html文件

 

1. 安装 `npm install html-webpack-plugin --save-dev`
2. 在webpack.config.js文件中配置(与modul同级)

// 注意需要注释掉publicPath，不然会冲突
// 先引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin')

// 配置规则
plugins: [
    new HtmlWebpackPlugin({
    // 如果名字为index默认的打开，否则需要自己手动打开对应页面
        filename: 'index.html',
        // 需要处理的页面
        template: 'template.html'
    })
]

webpack-bable的使用

 

• 安装 `npm install babel-core  babel-loader babel-preset-env --save-dev`
• 在webpack.config.js文件中配置(module 下的 rules 数组里配置)

 {
    test: /\.js$/,
    // Webpack2建议尽量避免exclude，更倾向于使用include
    // exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
    include: [path.resolve(__dirname, 'src')],
    use: {
      loader: 'babel-loader',
      // options里面的东西可以放到.babelrc文件中去
      <!--options: {-->
      <!--  presets: ['env']-->
      <!--}-->
    }
}

 

• 根目录创建 .babelrc文件

  {
    "presets":["env"]
  }

webpack处理单文件组件

1.配置webpack相关loader

 

• `npm install vue --save`
• `npm install vue-loader vue-template-compiler --save-dev`

2.配置webpack.config.js文件

 

• module中的rules里添加相关配置

{
    test: /\.vue$/,
    loader: 'vue-loader'
}


// 如果使用的是webpack1.x，还需要安装`babel-plugin-transform-runtime`,并添加一下配置；如果是webpack2.x以上请忽略一下配置
{
  test: /\.js$/,
  include: [path.resolve(__dirname, 'src')],
  use: {
    loader: 'babel-loader',
    // options里面的东西可以放到.babelrc文件中去
    options: {
      presets: ['env']
      // plugins: ['transform-runtime']
    }
  }
}

 3.使用vue文件创建vue组件

 // App.vue页面
<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'hello world'
    }
  }
}
</script>
<style scoped>
  div {
    color: red;
  }
</style>
```
##### 4.引入组件，并将组件渲染到页面
```
// app.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    // render 将App渲染到页面
    render: h=> h(App)
})

5.路由配置

 

// app.js
import Vue from 'vue'
import App from './App.vue'

import Login from './Login.vue'

// 1. 引入vue-router
import VueRouter from 'vue-router'

// 2. 表示使用路由插件
Vue.use(VueRouter)

//3. 配置路由规则
var router = new VueRouter({
  routes: [
    { name: 'login', path: '/login', component: Login }
  ]
})

new Vue({
  el: '#app',
  // 挂载路由
  router,
  // 这是个渲染函数，指定渲染组件
  render: h => h(App)
})