让前端飞Vue

webpack基本使用教程

2019-02-21  本文已影响5人  牧鸥

定义:

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

关键词:模块化打包

作用

简化前端开发工作

核心概念

webpack.config.js:

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),  //入口,main.js所在的绝对路径
  output: {  //出口
    path: path.join(__dirname,'./dist'),  //main.js的输出路径
    filename: 'bundle.js'  //main.js打包后的文件名
  },
  mode: "development",  //开发模式
  devServer: {  //插件,作用是模拟一个服务器,将文件放到服务器环境中运行
    // contentBase: path.join(__dirname,'./src'),
    open: true,
    port: 3002
  },
  plugins: [  //插件
    new htmlWebpackPlugin({  //作用:将js文件自动引入index.html
      template: path.join(__dirname,'./src/index.html')
    })
  ],
  module : {
    rules: [  //加载器
      {test: /\.css$/, use: ['style-loader','css-loader']},//css加载器,从右往左加载
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}
    ]
  } 
}

使用步骤

命令行方式配置

1.生成 package.json, 命令 : npm init -y,注意文件夹名不能为英文或webpack
2.安装 : npm i -D webpack webpack-cli

"scripts": {
    "build": "webpack main.js"
 },
// webpack 是webpack-cli 中提供的命令, 用来实现打包的
// ./main.js 入口文件,要打包哪个文件

4.创建一个main.js文件

console.log('webpack 的入口文件被打包了');

5.运行 : npm run build
6.设置开发状态 : mode

"build" : "webpack ./main.js --mode development"
// 项目开发的两种环境
//1. 开发环境 (development) : 开发过程就是开发环境
//2. 生产环境 (production) : 线上环境, 也就是 : 项目做好了,发布上线
//生产环境下, 打包生产的js文件都是压缩后的,  开发环境下代码一般是不压缩的
配置文件方式配置
  1. 项目根目录下, 创建一个 webpack.config.js文件 (文件名固定死),若要专门指定其他文件 : --config webpack.XX.js
  2. webpack.config.js 中,进行配置
  1. 修改 package.json 中的 scripts , 脚本命令为: "build": "webpack"
  2. 执行命令 : npm run build
  3. 示例代码
const path = require('path')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/js/main.js'),
  // 出口
  output: {
    // 出口目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 开发模式
  mode: 'development'
}
配置插件

webpack-dev-server


  1. webpack-dev-server 使用 webpack 必备的功能(插件)

作用 : 为使用 webpack 打包提供一个服务器环境

  1. 使用步骤
  1. 方式 1 : 命令行配置
  1. 一些问题:

解决 : 想要查看直接进入 src 文件 : 添加 --contentBase src

解决 : <script src="/bundle.js"></script>

解决 : 添加 --open

解决 : 添加 --port 3001

package.json里添加--hot

 "scripts": {
    "dev1": "webpack-dev-server --contentBase src --open --port 3001 --hot",
    "build": "webpack "
  },
  1. 配置文件配置
// hot 不要写在配置文件里面,,不然的话还要配其他插件麻烦
 "dev" : "webpack-dev-server --hot",

  devServer: {
    open : true,
    contentBase : path.join(__dirname,'./src'),
    port : 3001
  }

html-webpack-plugin


  1. html-webpack-plugin (必备的插件)
作用 :
  1. 安装 : npm i html-webpack-plugin -D
  2. 配置

第一步: 引入模块

const htmlWebpackPlugin = require('html-webpack-plugin')

第二步: 配置

// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]
配置加载器

webpack 只能处理 js 文件,非 js(css.less.图片.字体等)处理处理不了, 借助 loader 加载器

// loader 加载器
  module: {
    rules: [
      // 1. 处理css
      // 说明 : style-loader 和 css-loader 顺序不要换
      // 加载处理的顺序就是从后往前
      // css-loader : 处理css文件, 加载成一个模块
      // style-loader: 创建style标签,插入index.html. 
      { test: /\.css$/ , use : ['style-loader','css-loader']},
      // 2. 处理 less
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 3. 处理图片
      // base64 这是一种编码格式, 文件/图片都可以转化为base64格式,可以在浏览器中显示
      // base64 是一种字符串形式
      // 如果图片小的话,可以使用 base64 , 如果图片太大的话转化为base64 反而影响性能
      // { test : /\.(jpg|png|gif)$/, use:['url-loader'] }
      {
        test: /\.(jpg|png|gif)$/, use: [{
          loader: 'url-loader',
          options: {
            // 如果图片大小 <  limit的值100000 可以转化为base64  url-loader
            // 如果图片大小 >= limit的值 100000 不要转化为base64  引入本地文件  转化为哈希值(32)  file-loader
            limit : 50000
          }
        }]
      },
      // 处理字体图标
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] },
      
      // 处理es6 的语法
      { test : /\.js$/,use:['babel-loader'], exclude:/node_modules/ }
    ]
  }
上一篇 下一篇

猜你喜欢

热点阅读