webpack

二十三、webpack的起步

学过node,js比较好理解

1、安装

终端 全局安装

npm install webpack -g

2、准备工作

3、js文件的打包

webpack src/main.js dist/bundle.js

4、使用打包后的文件

二十四、webpack的配置

1、npm init

初始化，生成package.json文件

npm init -y

2、局部安装webpack

–save-dev 开发时依赖，项目打包后不在继续使用

npm install webpack --save-dev

3、创建webpack.config.js文件

目的：简化打包时的操作

这里需要终端下载，导入path 模块，用来写绝对路径

npm i path

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

终端 运行 webpack 即可打包

 webpack

4、在package.json 中定义启动

在"script"里写命令

package,json

"scripts": {
    "build": "webpack"
  }

这样就可以在终端敲 npm run build 运行打包任务了

npm run build

二十五、webpack的loader

1、什么是loader

2、css文件处理

2.1、准备工作

打包时会报错，因为没有下载对应的loader

2.2、下载css-loader

npm i --save-dev css-loader

css-loader只负责加载css文件，但并不负责将css 具体样式嵌入到文档中，需要再下载style-loader

2.3、下载style-loader

npm i --save-dev style-loader

2.4、使用

3、less文件处理

3.1、下载

npm i --save-dev less-loader less

3.2、使用

{
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      }

4、图片文件处理

4.1、下载url-loader

npm i --save-dev url-loader

4.2、使用

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

4.3、大图片处理

4.3.1、下载file-loader

npm i --save-dev file-loader

4.4、修改文件名字

5、ES6语法处理

5.1、下载

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

5.2、配置

{
  test: /\.js$/,
  // exclude: 排除
  // include: 包含
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

在main.js中

// 2.使用ES6的模块化的规范
import {name, age, height} from "./js/info";

二十六、webpack配置vue

1、下载vue.js

npm i -S vue

2、错误问题

resolve: {
  // alias: 别名
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
}

3、模块化写法

4、vue文件封装处理

4.1、安装vue-loader和vue-template-compiler

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

4.2、配置

rules下

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

新版本加载vue-loader，还需要下载插件再添加代码

npm i vueloaderplugin --save-dev

const VueLoaderPlugin =require('vue-loader/lib/plugin');

plugins: [ new VueLoaderPlugin() ]

4.3、分离

创建 .vue 文件，以下是基本代码

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

将原app.js 的部分代码复制到 .vue 文件

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按钮</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
  		return {
    		message: 'Hello Webpack',
    		name: 'coderwhy'
  		}
	},
	methods: {
  		btnClick() {
		
  		}
	}
  }
</script>

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

二十七、webpack的plugin

1、认识plugin

plugin是插件的意思，通常是用于对某个现有的架构进行扩展
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

loader和plugin区别
loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件

2、添加版权的Plugin

plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有')
],

3、打包html的Plugin

3.1、安装

npm install html-webpack-plugin --save-dev

3.2、配置

plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
],

3.3、删除之前在output中添加的publicPath属性

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  // publicPath: 'dist/'
},

二十八、webpack搭建本地服务器

1、下载模块

npm install --save-dev webpack-dev-server

2、配置

webpack.config.js

devServer: {
  contentBase: './dist',
  inline: true
}

package.json

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --open"
  },

3、运行

npm run dev