Webpack基本使用

Webpack介绍:主要用于web项目中打包资源进行自动构建,Webpack将所有资源视为JS的模块来进行构建,所以对于CSS,Image等非JS类型的文件,Webpack会使用相应的加载(loader)器来加载成其可识别的JS模块资源,通过配置一些信息,就能将资源进行打包构建,更好地实现前端的工程化

Webpack安装

本地安装:

npm install -D webpack
-D 实际上是简写  --dev-save

如果你使用Webpack 4+ 版本, 你还需要安装CLI.

npm install -D webpack-cli

要安装特定版本

npm install -D webpack@<version>

全局安装:

npm install -g webpack

配置项简介:

  1. Entry,入口文件配置,Webpack执行构建的第一步将从entry开始,完成整个工程的打包
  2. Module,模块,在Webpack里,一切皆模块,Webpack会从配置的entry开始递归找出所有依赖的模块,最常用的是rules配置项,功能是匹配对应的后缀,从而针对代码文件完成格式转换和压缩合并等指定的操作.
  3. Loader,模块转换器,用于把模块原内容按照需求转换成新内容,这个是配合Module模块中的rules中的配置项来使用.
  4. Plugins,扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情.(插件API)
  5. Output,输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果,配置项用于指定输出文件夹,默认是./dist

基本使用

把src的代码编译到dist目录中

project

handle
|- package.json
|- webpack.config.js
|- index.html
|- /src
  |- index.js
  |- mixin.js
|- /dist
  |- bundle.js

src/index.js

import  content  from "./mixin";
document.body.appendChild(content("webpack"));

src/mixin.js

module.exports = function (con) {
  var element = document.createElement('div');

  element.innerHTML = 'Hello, ' + con;
  return element;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>起步</title>
</head>
<body>
   <script src="./dist/bundle.js"></script>
</body>
</html>

.npmrc

registry=https://registry.npm.taobao.org

webpack.config.js

const path = require('path');

module.exports = {
  // 打包的入口点
  entry: './src/index.js',
  // 打包的输出点
  output: {
      // 打包之后输出文件的名称
    filename: 'bundle.js',
      // 打包之后输出文件的路径
    path: path.resolve(__dirname, 'dist')
  }
}

总结

webpack 的基本使用方式 :

  1. 配置package.json的start命令为webpack
  2. 创建webpack.config.js
  3. 指定项目打包的入口
  4. 指定项目打包后文件的名称和输出路径

配置代码错误源

如果报错了,是这样子的:

我们需要知道代码的具体错误,如图:

修改配置文件:

webpack.config.js

devtool: 'inline-source-map',
<!--去掉警告提示-->
mode: 'none'

webpack加载CSS

下载包

npm install -D style-loader css-loader

引入资源

src/js/index.js

// 引入css
import '../css/main.css'

修改配置文件

webpack.config.js

module: {
  rules: [
    // 加载css
    {
      // 找到css文件()
      test: /\.css$/,
      // 需要转换器(需要什么转换器 都是大家都知道的 style-loader css-loader)
      use: ['style-loader', 'css-loader']
    },
  ]
}

webpack加载图片

下载包

npm install -D file-loader

引入资源

src/js/index.js

// 引入图片
const imgSrc = require('../image/chrome.png');

修改配置文件

webpack.config.js

rules: [
  {
    test: /\.(png|jpe?g|gif|svg)$/,
    use: ['file-loader']
  }
]

webpack加载字体

  1. 下载字体
  2. 定义字体 @font-face { font-family: 'wanlum'; src: url("../fonts/Raleway.ttf"); }
  3. 使用字体 div { font-family: 'wanlum'; color: red; font-size: 30px; }
  4. 配置webpack.config.js { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] }

webpack编译ES6

  1. 下载包 npm install -D babel-cli babel-preset-env babel-loader
  2. 编辑配置文件 .babelrc { "presets": [ "env" ] }
  3. 配置webpack.config.js { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }

less编译成css

  1. 下载包 npm install less-loader less -D
  2. 配置webpack.config.js { test: /\.less$/, use: ['style-loader','css-loader', 'less-loader'] },

html自动生成

  1. 下载包 npm install -D html-webpack-plugin clean-webpack-plugin
  2. 引入包 // 重新生成html的 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 清理dist目录 const CleanWebpackPlugin = require('clean-webpack-plugin');
  3. 配置webpack.config.js plugins: [ new HtmlWebpackPlugin({ title: "你好" }), // 清理dist目录 new CleanWebpackPlugin(['dist']) ],

自动编译实时加载

  1. 下载包 npm install -D webpack-dev-server
  2. 配置webpack.config.js devServer: { contentBase: './dist' }
  3. 配置package.json启动项 "start": "webpack-dev-server --config webpack.config.js"

热替换(跟自动编译实时加载功能差不多)

  1. 配置webpack.config.jsplugins: [ new HtmlWebpackPlugin({ title: '使用HtmlWebpackPlugin' }), new webpack.NamedModulesPlugin(['dist']), new webpack.HotModuleReplacementPlugin(['dist']) ], devServer: { contentBase: path.resolve(__dirname,'dist'), hot: true }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

Vuex开发简单的购物车(1)

26930
来自专栏IT平头哥联盟

职场寒冬 请不要让码农只能活在青春里~

“我月入3万,怎么会少少了你一个鸡蛋啊?” 这是2017年9月左右的一个新闻,一位煎饼摊大妈因和顾客争执时脱口而出这样一句话而走红。当时还上了各大新闻的头条。

10320
来自专栏Spring相关

使用webpack打包js文件(隔行变色案例)

13820
来自专栏前端桃园

说说前端未来几年的发展方向

做 web 前端的同学都知道,和原生的 App 相比,性能一直一个致命的痛点,如果要追求性能,肯定得用原生 App。那么在性能上,未来几年可能是一个方向。

15820
来自专栏前端迷

为什么招聘高级前端开发这么难?(来源:知乎)

先交代背景:上海的创业公司,成立快十年,团队规模近百;主力是自己的产品,有时也作为技术合作方帮合作伙伴做一点外包;前端团队10人以内,目前主要技术栈是 Reac...

1.5K20
来自专栏一个会写诗的程序员的博客

用户登录前后端分离开发实战案例:React,npm,webpack,ES6, Kotlin, Spring Boot, Gradle, Freemarker, Material UIKotlin 开发

用户登录前后端分离开发实战案例:React,npm,webpack,ES6, Kotlin, Spring Boot, Gradle, Freemarker, ...

36430
来自专栏Spring相关

webpack处理url资源的配置

13440
来自专栏娱乐心理测试

vue运行报错:Cannot find module 'webpack/bin/config-yargs'

84820
来自专栏Spring相关

Vue中webpack的Style的lang和Scoped属性

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

43620
来自专栏Spring相关

webpack使用来打包前端代码

同时修改index页面中script的src属性为<script src="bundle.js"></script>

15110

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励