webpack的一些基本使用(loaders)

最新推荐文章于 2023-03-08 16:45:49 发布

不是山南理工大的了|

最新推荐文章于 2023-03-08 16:45:49 发布

阅读量366

点赞数

分类专栏：前端总结文章标签： vue js 经验分享

本文链接：https://blog.csdn.net/gejutaixiao_7/article/details/108371317

版权

前端总结专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack的基本使用

概念

概念

webpack是一个现代的JavaScript应用程序的静态模块打包器。是处理各个文件之间依赖关系的工具。
当在代码中使用CommonJS模块化规范、ES6模块化规范或其他规范时，可以解决各个文件之间的相互依赖，并且读懂某些规范的含义。
CommonJS模块化规范举例：
导入与导出：

const { add, mul } = require('./mathUtils.js')

module.exports = {
	add, mul
}

ES6模块化规范举例：
导入与导出：

import {name, age, height} from './info.js'   //导入
export const name = 'why'  //导出
export default function() {  //导出默认值
	console.log('18');
}

在没有用webpack前，代码本身是不能识别CommonJS模块化的。利用webpack就可以使浏览器识别模块。

一、webpack的起步

如果自己手动配置项目的话，首先在项目目录下创建两个文件夹，为dist与src文件夹，文件夹中的包含的文件如下：
在这里插入图片描述

在命令行输入：webpack ./src/main.js ./dist/bundle.js，就会在dist文件夹中生成bundle.js文件。
其中，main.js文件表示项目的js入口文件，dist文件夹为项目发布时需要上传到服务器的文件夹，其中的bundle.js文件为输出文件。而index.html文件为运行项目的入口文件。

二、webpack的配置

1.首先使用下载node，利用node环境，以及node本身自带的npm(包管理工具)。
2.在文件夹中创建一个webpack.config.js文件，来配置文件的入口与出口，如下所示：

const path = require('path');

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

3.在命令行输入npm init来生成package.json文件，来进行管理项目运行时所依赖的文件，创建的过程如下所示：(配置选择默认的就可以了)
在这里插入图片描述
获得的package.json文件内容大致如下：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "-",
    "bulid": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

4.再利用npm install安装项目运行时依赖的文件（如webpack.config.js中的path文件）。
5.此时在终端输入webpack运行，就会发现webpack将生成新的文件即bundle.js文件(在dist文件夹)，此时该文件已经解决的各个文件之间的模块依赖。

在package.json文件中输入输入以下代码，可以使在打包文件时，输入npm run build即可
在这里插入图片描述

三、webpack的loader

1.webpack中使用css文件的配置

①首先在src文件夹中创建一个css文件夹；
②在文件夹中创建一个normal.css文件；
③在main.js中用require('./css/normal.css')导入这个文件；
④找到webpack官网¹点击中文文档，找到loaders按钮。

在这里插入图片描述
⑤此时会看到关于loaders的简介(webpack可以使用loader来预处理文件）；
⑥找到我们所需要的css-loader，进入之后会发现特别详细的介绍；

安装css-loader

npm install --save-dev css-loader

用法
webpack.config.js

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

⑦再次在命令行运行npm run build就会得到新打包好的文件。

2.webpack-less文件的处理

①在./src/css文件夹中创建special.less文件；
②在main.js文件中利用require('./css/special.less')导入文件；
③找到webpack官网点击中文文档，在loaders模块中找到less-loader；

安装less-loader

npm install --save-dev less-loader less

The less-loader requires less as peerDependency. Thus you are able to control the versions accurately.

module.exports = {
    ...
    module: {
        rules: [{
            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
            }]
        }]
    }
};

④再次在命令行运行npm run build就会得到新打包好的文件
3.webpack-图片文件的处理

①在src文件夹中创建img文件夹，并放入一张图片src/img/cache.jpg，图片大小约为40kb；
②在normal.css中利用background: url('../img/cache.jpg');将图片设置为页面背景；
③找到webpack官网点击中文文档，在loaders模块中找到url-loader；

安装url-loader

npm install --save-dev url-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

④因为此时文件的大小大于限制的limit，所以进行编译时会出现错误，此时按照错误提示进行file-loader的安装即可(或将limit设置成大于图片大小，那么此时就不需要安装file-loader）；

安装file-loader

npm install --save-dev file-loader

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

注：若已经安装了url-loader，则此时不需要再在webpack.config.js中进行配置。

生成文件 file.png，输出到输出目录并返回 public URL。如"/dist/0dcbbaa7013869e351f.png"
其中输出目录需要在webpack.config.js中进行配置，代码如下：(如果不配置publicPath，则打包产生的图片就会直接在src文件夹中，不会存在dist文件夹中，那么发布项目时就得不到想要的效果)

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/' //涉及url的文件，都会在地址前加上dist/
  },
  ......
}

此时生成的图片名称是由32位哈希值组成的，比较杂乱无章，可以在配置url-loader时，进行图片命名，代码如下(配置完成后，图片的地址就位于./dist/img/文件夹中）：

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

img：文件要打包到的文件夹
name：获取图片原来的名字，放在该位置
hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext：使用图片原来的扩展名

④再次在命令行运行npm run build就会得到新打包好的文件，预览如下:

在这里插入图片描述
4.webpack-ES6转ES5的babel
①仔细阅读webpack打包的js文件，会发现写的ES6语法并没有转换成ES5，那么意味着可能一些ES6还不支持的浏览器没有办法很好的运行我们的代码
②如果希望将ES6语法转换成ES5，那么就需要使用babel
③找到webpack官网点击中文文档，在loaders模块中找到babel-loader；

安装babel-loader

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

配置webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

④再次在命令行运行npm run build就会得到新打包好的文件，查看bundle.js文件，发现其中的内容变成了ES5的语法。

5.webpack使用Vue的配置过程

①希望在项目中使用Vue.js，那么必须需要对其有依赖，所以需要进行安装；

安装vue

npm install vue --save

注：因为后续是在实际项目中也会使用Vue的，所以并不是开发时依赖

②在使用时首先导入Vue；

import Vue from 'vue'  //此行导入vue
// import App from './vue/app.js'
import App from './vue/App.vue'

new Vue({
  el: '#app',
  template: `<App/>`,
  components: {
    App
  }
})

③打包项目并运行程序，出现错误(错误说我们使用的是runtime-only版本的Vue)，此时需要在webpack.config.js中添加如下内容即可：

在这里插入图片描述

④再次在命令行运行npm run build就会得到新打包好的文件。

6..vue文件的封装处理
①创建一个.vue文件如下：

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button>按钮</button>
    <Cpn></Cpn>
  </div>
</template>

<script>
  import Cpn from './Cpn.vue'
  export default {
    data() {
      return {
        message: 'hello webpack'
      }
    },
    components: {
      Cpn
    }
  }
</script>

<style scoped="scoped">
  .title {
    color: yellow;
  }
</style>

②这个文件不能被正常的加载，所以需要安装vue-loader与vue-template-compiler

安装vue-loader与vue-template-compiler

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

③修改webpack.config.js配置文件如下：

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

④再次在命令行运行npm run build就会得到新打包好的文件。

关于上述所依赖的包的版本如下：

webpack
npm install webpack@3.6.0

css-loader
npm install css-loader@2.0.2 --save-dev

style-loader
npm install style-loader@0.23.1 --save-dev

less-loader
npm install --save-dev less-loader@4.1.0 less@3.9.0

url-loader
npm install --save-dev url-loader@1.1.2

es6转换成es5
npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

Vue
npm install vue@2.5.21 --save

webpack中文官网 ↩︎

不是山南理工大的了|

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的一些基本使用(loaders)

webpack的基本使用概念一、webpack的起步二、webpack的配置三、webpack的loader概念webpack是一个现代的JavaScript应用程序的静态模块打包器。是处理各个文件之间依赖关系的工具。当在代码中使用CommonJS模块化规范、ES6模块化规范或其他规范时，可以解决各个文件之间的相互依赖，并且读懂某些规范的含义。CommonJS模块化规范举例：导入与导出：const { add, mul } = require('./mathUtils.js')module.
复制链接

扫一扫