webpack入门

webpack安装

1. webpack4.0以上的需要安装webpack-cli ，注意最好不要使用全局安装，踩了很多坑，还是没搞好，最好还是采用了局部安装，可能是我能力不太行。
   npm i webpack -D
   npm i webpack-cli -D
2. 在项目更目录下输入命 npm init -y会产生一个package.json文件，目录结构如下
3. 在项目根目录中，创建名为webpack.config.js的文npm件，初始化如下基本配置：

// 这个配置文件，其实就是一个js文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports={
    // 编译模式
    // development转换出来的代码不会进行压缩，转换速度快
    // production会进行压缩，基本上上线的时候采用production
    mode:"development",
}

4. 在package.json配置文件中的scripts节点下，新增dev脚本如下：
   
5. 在终端运行npm run dev 命令，启动webpack进行打包，如果不进行上步操作，那么使用webpack命令也是可以运行的。
6. 目录结构如下：
   

webpack的基本使用

配置打包的入口和出口

webpack的4.x版本默认约定

• 打包的入口文件为 src -> index.js
• 打包的输出文件为 dist -> mainj.js
  如果要修改打包的入口和出口，可以在webpack.config.js中新增如下配置信息：

示例代码：

// 导入node.js中专门操作路径的模块
const path = require('path')

// 这个配置文件，其实就是一个js文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports={
    // 编译模式
    // development转换出来的代码不会进行压缩，转换速度快
    // production会进行压缩，基本上上线的时候采用production
    mode:"development",
    // 打包入口文件的路径
    // __dirname表示当前文件所处的目录，也就是项目根目录
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        // 输出文件的存放路径
        path:path.join(__dirname,'./dist'),
        // 输出文件的名称
        filename:'bundle.js'
    }
}

配置自动打包的功能

每一次我们index.js都需要问重新进行打包操作，这样的话略显麻烦。
配置自动打包

• npm i webpack-dev-server -D 安装webpack-dev-server

• 将package.json中的dev进行修改如下
  
  配置html-webpack-plugin生成预览页面

• 运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件

• 修改webpack.config.js文件头部区域，添加如下配置信息：

// 导入预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    // 指定要用到的模板文件
    template:'./src/index.html',
    // 指定生成的文件的名字，该文件存在内存中，在目录中不显示
    filename:'index.html'
})

• 修改webpack.config.js文件中香味暴露的配置对象，新增如下配置节点：
  
• 执行npm run dev 就成功了

配置自动打包的相关参数

 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" 

webpack中的加载器

通过loader打包非js模块

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。
loader加载器可以协助webpack打包处理特定的文件模块，比如：

• less-loader可以打包处理 .less 相关文件
• sass-loader可以打包处理 .scss相关文件
• url-loader可以打包处理 .css中与url路径相关文件

loader打包流程

webpack中加载器的基本使用

打包处理css文件

• 运行 npm i style-loader css-loader -D命令，安装处理css文件的loader
• 在webpack.config.js中进行配置
  注意：test和user的顺序是固定的，不能颠倒，否则会报错

module.exports = {    
    module: {
        rules: [
            {
                // test表示匹配的文件类型，接受正则表达式，use表示对应要调用的loader
                test: /\.css$/, use: ['style-loader', 'css-loader']
            }
        ]
    }

}

• 在项目的js入口文件中（index.js）引入css

import './css/style.css'

• 重新启动项目

打包处理less文件

• 运行npm i less-loader less -D命令
• 在webpack.config.js进行配置

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

• 在项目入口中引入(index.js)

import './css/style.less'

• 重新启动项目

打包处理scss

• 用命令安装sass-loader和node-sass，命令为npm i sass-loader node-sass -D
  注意：用npm安装node-sass的时候可能会发生安装失败的情况，可以采用cnpm进行安装
• 在webpack.config.js中进行配置

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

• 在项目入口文件(index.js）中进行引入

import './css/style.scss'

• 重启运行项目

配置postCSS自动添加css的兼容前缀

当我们使用css样式的时候，可能会出现ie等浏览器不兼容，所以需要为每个浏览器添加前缀，进行兼容，这样比较麻烦，因此可以使用postcss自动为css添加css的兼容前缀

• 运行 cnpm i postcss-loader autoprefixer -D命令，进行下载
• 在项目根目录中创建postcss的配置文件postcss.config.js并进行如下初始化配置：

// 导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')

module.exports={
    // 挂载插件
    plugins:[autoprefixer]
}

• 在webpack.config.js的module，rules中修改规则如下：
  

打包样式表中的图片和字体文件

• 运行npm i url-loader file-loader -D命令
• 在webpack.config.js的module的rules数组中，天极爱loader规则如下：

module: {
        rules: [
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2/,use:['url-loader?limit=25000 ']
            }
        ]
    }

其中？之后的是loader的参数项
limit用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转成base64图片

• 重新启动项目

打包处理js文件中的高级语法

• 安装babel转换器相关的包：npm i babel-loader @babel/core @babel/runtime -D
• 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
• 在项目根目录中，创建babel配置文件，并初始化基本配置如下：

module.exports={
    presets: ['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

• 在webpack.config.js总添加loader规则如下：

 module: {
        rules: [      
            {
              // exclude为排除项，表示label-loader不需要处理node_modules中的js文件
                test:/\.js$/,use:'babel-loader',exclude:/node_modules/
            }
        ]
    }

配置vue组件的加载器

当文件中定义了vue单文件组件，想引入发现会报错无法引入，需要配置vue组件的加载器。

• 运行npm i vue-loader vue-template-compiler -D命令加载
• 在webpck.config.js配置文件中，添加vue-loader的配置项如下：

// vue组件的加载器模块引入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module: {
        rules: [
            {
                test:/\.vue$/,loader:'vue-loader'
            }
        ]
    }

在plugins中添加该插件

在webpack中使用vue

• 在入口文件中导入组件，并进行挂载和渲染

import Vue from 'vue'
// 导入单文件组件
import App from './css/components/App.vue'

const vm = new Vue({
    el: "#app",
    // 用render函数,把指定的组件渲染到el区域中
    // 在webpack中都是用render来渲染组件，而不是在用componets和template来渲染
    render: h => h(App)
})

• vue单文件组件

<!-- 单文件组件 -->
<template>
    <div>
        <h1>这是一个单文件组件</h1>
    </div>
</template>

<script>

export default{
    data(){
        return{};
    },
    methods: {
        
    }
}
</script>

<!--如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。  -->
<style scoped>

</style>

webpack 打包发布

• 在package.json中进行配置

"scripts": {
  	//用于打包的命令
    "build":"webpack -p",
    //用于开发调试的命令
    "dev": "webpack-dev-server --open "
  },

• 执行npm run build命令进行打包