Webpack打包工具安装使用介绍

一.Webpack的安装

webpack安装依赖nodejs，下面介绍是基于系统已安装node.js
webpack3.6.0 是vue cli2脚手架依赖的版本
npm install [email protected] -g(全局安装)

二.webpack模块化开发基本目录结构

下面是一个最基础的webpack目录结构

src 源代码放置目录
dist（distribution发布）代码发布目录

当进行模块化开发时，js代码之间有依赖（CommonJS或ES6模块化开发），我们可以将依赖的js文件打包成一个文件，然后在index.html引用打包后的文件

webpack .\src\main.js .\dist\boundle.js

三.使用webpack.config.js配置文件

webpack.config.js这个js文件就是打包时的配置文件，设置打包入口entry，和打包后代码存放的路径output等，如下是一个简单的配置

const path = require('path')

module.exports = {
     
    entry: './src/main.js',
    output: {
     
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/',
    },
    module:{
     
        rules:[
            {
     
                test: /\.css$/i,
                use:['style-loader','css-loader']
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式文件添加到DOM中
            },
            {
     
                test: /\.less$/i,
                use:['style-loader','css-loader', 'less-loader']
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式文件添加到DOM中
            },
            {
     
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
     
                    loader: 'url-loader',
                    options: {
     
                      limit: 8196,
                      name: 'img/[name][hash:8].[ext]'
                    },
                    
                  }
                ]
            },
            // {
     
            //     test: /\.(png|jpg|gif)$/i,
            //     use: [
            //       {
     
            //         loader: 'file-loader',
            //         options: {}
            //       }
            //     ]
            // }
            {
     
                test: /\.m?js$/,
                //打包时排除node_modules中的js文件
                exclude: /(node_modules|bower_components)/,
                use: {
     
                  loader: 'babel-loader',
                  options: {
     
                    presets: ['es2015']
                  }
                }
            },
            {
     
              test: /\.vue$/i,
              use: ['vue-loader'],
            }
        ],
    },
    // 开发时的vue依赖版本，vue.esm.js支持template的complier
    resolve:{
     
      extensions: ['.js', '.css', '.vue'],
      alias:{
     
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
}

四.webpack、node、npm关系

node.js 是一个运行在服务端的javascript运行环境，是javascript运行的载体
webpack是前端代码打包工具，可以对模块化js，css，图片等进行打包，模块依赖进行解析
npm是node package manager，即node.js包管理器

npm init：是包管理初始化，会进行包名，版本，入口等参数进行设置，执行该命令后会生成一个package.json文件，其中scripts就是npm run执行的命令，用来简化webpack运行命令

五.css文件打包

webpack中loader
webpack处理less文件
less-loader如果项目中我们想用less，scss，stylus来书写样式，webpack是可以处理的，只不过要安装对应的loader，以less文件为例

css-loader只负责将css文件进行加载
style-loader负责将样式文件添加到DOM中

图片文件处理
url-loader 其中图片文件大小小于limit中指定的图片大小阈值，将图片编译成base64显示
file-loader 图片大小大于阈值，直接加载指定路径下的图片

五.ES6语法转es5

webpack中es6语法转es5可以通过babel工具进行转化

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

安装完这些依赖的loader后再次打包即可将es6语法转成es5

六.Webpack中使用Vue配置

webpack中集成Vue.js
npm install vue --save，这时候就会将vue安装到node_modules下，然后我们就可以通过import Vue from ‘vue’导入Vue对象

组件化开发loader依赖
vue-loader vue文件加载依赖
vue-template-compiler vue文件代码编译依赖

npm install [email protected] [email protected] --save-dev

七.组件化开发.vue文件基本格式

<template>
    <div>
        <h2 class="title">{
    {msg}}h2>
        <button @click="btnclick">按钮button>
        <Cpn>Cpn>
    div>
template>

<script>
    import Cpn from './Cpn'
    export default {
      
        name: 'App',
        components: {
      
            'Cpn': Cpn
        },
        data(){
      
        return {
      
                msg: 'i love you'
            }
        },
        methods:{
      
            btnclick(){
      
                    alert("hello")
                }
            }
        }
script>

<style scoped>
    .title {
      
        color: green;
    }
style>