一、基础

1 安装

npm i -g webpack webpack-cli

// 推荐安装至本地
npm i -D webpack webpack-cli

2 webpck基础使用

2.1 webpack-cli

Npm 5.2以上的版本中提供了一个npx命令

npx想要解决的主要问题、就是调用项目内部安装的模块、即就是在node_modules下的.bin目录中找到对应的命令执行

使用webpack命令: npx webpack

Webpack4.0之后可以实现0配置打包构建、0配置的特点就是限制较多、无法自定义很多配置

开发过程中还是使用webpack配置进行打包构建

2.2 webpack配置

Webpack 四大核心概念

  • 入口entry — 程序的入口js
  • 输出 output — 打包后存放的位置
  • 加载器loader — 用于对模块的源代码进行转换
  • 插件plugins — 解决loader无法解决的问题

基本配置

  1. 配置 webpack.comfig.js
  2. 运行 npx webpack
// 运行默认webpack.config.js文件
npx webpack
npx webpack webpack.config.js // 运行自定义配置文件
npx webpack --config webpack.custom.config.js //package.json 配置
"dev": "webpack --config webpack.custom.config.js",
"dev1": "npx webpack --config webpack.custom.config.js", // npx 可省略、会自动在node_modules里面找
"dev2": "webpack"
const path = require('path')

module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename:'bundle.js'
},
mode: 'development'
}

2.3 自动编译工具配置

每次要编译代码时,需要运行npm run dev比较烦,webpack提供了几个选项、可以自动编译

  1. webpack watch mode
  2. webpack-dev-server
  3. webpack-dev-middleware

多数场景中、推荐使用webpack-dev-server

2.3.1 watch

webpack指令后面加上--watch参数即可

主要的作用就是监视本地项目文件的变化、发现有修改的代码就会自动编译打包、生成输出文件

  • 通过cli的方式设置watch参数
  1. 配置package.json

    "watch": "webpack --watch"
  2. 运行 npm run watch

  • 通过配置文件对watch的参数进行修改
const path = require('path')

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename:'bundle.js'
},
// 开启监视模式、此时执行webpack指令进行打包会监视文件变化自动打包
watch: true
}

2.3.2webpack-dev-server (重点)

  • 简单配置
  1. 安装devServer

    安装devServer需要依赖webpack、必须在项目依赖中安装webpack

    npm i -D webpack-dev-server

  2. index.html中

    <script src='/bundle.js'></script>
  3. 运行

    npx webpack-dev-server
  4. 运行

    npx webpack-dev-server --hot --open --port 9527
  5. 配置package.json

    "dev": "webpack-dev-server  --contentBase src --compress --hot --open --port 9527"
    
    // --contentBase src 是以src为根目录, 否则以项目为根目录
    // --open 自动打开
    // --port 端口号
    // --hot 热模块更新
    // --compress 利用express开启gzip压缩
  6. 运行

    npm run dev

devServer 会在内存中生成一个大包好的bundle.js, 专供开发时使用,打包效率高,修改代码后会自动打包重新打包以及刷新浏览器

  • 修改webpack.config.js
const path = require('path')

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename:'bundle.js'
},
// 将cli中的参数 在配置文件中进行配置
devServer:{
hot:true,
open: true,
port:9527,
compress: true,
contentBase:'./src'
}
}

2.3.3 html插件

  1. 安装 html-webpack-plugin 插件

    npm i -D html-webpack-plugin
  2. webpack.config.js 中 plugins 节点下配置

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    plugins:[
    new HtmlWebpackplugin({
    filename: 'index.html', // 生产的文件名称
    template: './src/index.html' // 将此目录下的文件作为模板生成一个新的html、放置在根目录的内存中
    })
    ]
    1. devServer时、根据模板在express项目根目录下生成html文件、类似于devServer生成内存中的bundle.js
    2. devServer时、自动引入 bundle.js
    3. 打包时会自动生成index.html

2.3.4 webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)、它可以把webpack处理后的文件传递给一个服务器(server)、webpack-dev-server 在内部使用了它、同时、它可以作为一个单独的包来使用、以便进行更多自定义设置来实现更多的需求

  1. 安装express 和 webpack-dev-middleware

    npm i -D express webpack-dev-middleware
  2. 新建 server.js

    const express = require('express')
    const webpack = require('webpack')
    const webpackDevMiddleware = require('webpack-dev-middleware')
    const config = require('./webpack.config') const app = express()
    const compiler = webpack(config) app.use(webpackDevMiddleware(compiler, {
    publicPath:'/'
    })) app.listen(3333, function () {
    console.log('port:3333');
    })

    如果要使用middleware、必须使用html-webpack-plugin插件、否则html文件无法正确的输出到express服务器的根目录

2.3.5 总结

只有在开发时才需要使用自动编译工具

项目上线时都会直接使用webpack进行打包构建、不需要使用这些自动编译工具

自动编译工具只是为了提高开发体验

2.4处理CSS

  1. 安装 css-loader style-loader

    npm i -D css-loader style-loader
  2. 配置web pack

    module:{
    rules:[
    // 配置的是用来解析.css文件的loader,css-loader、style-loader
    // css-loader -- 解析css文件
    // style-loader -- 将解析出来的结果 放到html中 使其生效
    {
    test:/\.css$/,
    use:['style-loader', 'css-loader'] // webpack底层调用这些loader的顺序是从右向左
    }
    ]
    }

2.5 处理less和scss

  1. 安装

    npm i -D less less-loader sass-loader node-sass
  2. 配置less

    {
    test:/\.less$/,
    use:['style-loader', 'css-loader', 'less-loader']
    }
  3. 配置sass

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

2.6处理图片和字体

  1. 下载、url-loader 封装了 file-loader

    npm i -D file-loader url-loader
  2. 配置

    1. 配置 filte-loader
    { // 处理图片
    test: /\.(png|jpg|gif)$/,
    use: 'file-loader'
    },
    { // 处理字体图标文件
    test: /\.(woff|woff2|eot|svg|ttf)$/,
    use: 'file-loader'
    },
    1. 配置url-loader
    {
    test:/\.(png|jpg|gif)$/,
    use:{
    loader: 'url-loader',
    options: {
    // limit 表示若图片的大于5KB、就以路径的形式展示、小于的话就用base64格式展示
    limit: 5 * 1024,
    outputPath:'images', // 图片生成的文件夹名称
    name:'[name]-[hash:6].[ext]' // 生成的图片名称
    }
    }
    //use 也可以写成数组
    use:[{
    loader:'url-loader',
    options:{
    limit: 12 * 1024
    }
    }]
    }

2.7 babel

  1. 安装

    npm i -D babel-loader @babel/core @babel/preset-env
  2. 如果需要支持更高级别的es6语法、可以继续安装插件、在官网找对应的插件安装

    npm i -D @babel/plugin-proposal-class-properties
  3. 配置

    {
    test: /\.js$/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['@babel/env'],
    plugins: ['@babel/plugin-proposal-class-properties']
    }
    },
    exclude: /node_modules/,
    include: path.resolve(__dirname, '../src')
    }

> 官方更加建议使用 .babelrc 配置

{

"presets": ["@babel/env"],

"plugins": ["@babel/plugin-proposal-class-properties"]

}

   

3.1 如果需要使用 genetator,无法直接使用 babel 进行转换,因为会将 generator 转换为一个 regeneratorRuntime, 然后使用 mark 和 wrap 来实现 generator

- 安装插件

     ```
npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime
  • 配置中、修改 plugins


    plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime'
    ]

3.2 如果需要使用 ES6/7 中对象原型提供的新方法,babel 默认情况无法转换,即使用了 plugin-transform-runtime 的插件也不支持转换原型上的方法,需要使用 polyfill - 安装 ```
npm i -S @babel/polyfill
  • 在需要使用该模块的地方直接引入

    import '@babel/polyfill'

2.8 插件

2.8.1 clean-webpack-plugin

该插件可以用于自动清除dist目录后重新生成,在 npm run build 的时候非常有用

  1. 安装插件

    npm i -D clean-webpack-plugin
  2. 引入插件

    const {CleanWebpackPlugin} = require('clean-webpack-plugin')
  3. 配置插件

    plugins:[
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
    }),
    new CleanWebpackPlugin()
    ],

2.8.2 copy-webpack-plugin

  1. 安装

    npm i -D copy-webpack-plugin
  2. 引入插件

    const CopyPlugin = require('copy-webpack-plugin');
  3. 配置插件

    from:源、从哪里拷贝,可以是绝对路径或者绝对路径,推荐绝对路径

    to:目标、拷贝到哪里去,相对于output的路径,同样可以是相对路径或者绝对路径,更推荐相对路径、直接相对于dist目录即可

    plugins:[
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new CopyPlugin([
    {
    from: path.join(__dirname, 'static'),
    to: 'static'
    }
    ])
    ],

2.8.3 BannerPlugin

是一个webpack内置插件、用于给打包的js文件加上版权注释信息

  1. 引入webpack插件

    const webpack = require('webpack')
  2. 配置

    plugins:[
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new CopyPlugin([
    {
    from: path.join(__dirname, 'static'),
    to: 'static'
    }
    ]),
    new webpack.BannerPlugin('王耀的版权信息')
    ],

webpack基础知识的更多相关文章

  1. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  2. Webpack基础知识总结

    本文将从多个方面回顾下自己了解的Webpack知识,包括常见的配置项,前端搭建的一些方法和项目实际优化方法,有错误的地方还请指出并多多包涵. 一.关于Webpack 1.概念 本质上,webpack ...

  3. webpack基础知识介绍

    1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...

  4. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  5. vue3 自学(一)基础知识学习和搭建一个脚手架

    两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升 ...

  6. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  7. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

  8. RabbitMQ基础知识

    RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...

  9. Java基础知识(壹)

    写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...

随机推荐

  1. Ubuntu14.04 静态编译安装Qt4.8.6

    ./configure -static -nomake demos -nomake examples -nomake tools -no-exceptions -prefix /usr/local/Q ...

  2. Linux ssh及远程连接工具

    putty:http://www.so.com/link?url=http%3A%2F%2Fsoftdl.360tpcdn.com%2FPuTTY%2FPuTTY_0.67.zip&q=put ...

  3. SQL 游标知识整理

    游标声明格: declare 游标名称 cursor (游标关键字) for 游标操作对象(select * from 表名称)游标使用: open 游标名称; fetch first from 游标 ...

  4. return view 详解 MVC

    1.return View(); 返回值 类型:System.Web.Mvc.ViewResult将视图呈现给响应的 View() 结果. 注释 View() 类的此方法重载将返回一个具有空 View ...

  5. python代码检查工具pylint 让你的python更规范

    1.pylint是什么? Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准(Pylint 默认使用的代码风格是 PEP 8,具体信息,请参阅 ...

  6. 高并发IM系统架构优化实践

    互联网+时代,消息量级的大幅上升,消息形式的多元化,给即时通讯云服务平台带来了非常大的挑战.高并发的IM系统背后究竟有着什么样的架构和特性? 以上内容由网易云信首席架构师内部分享材料整理而成 相关阅读 ...

  7. Python自学day-12

    一.Mysql概述 RDBMS:关系型数据库管理系统.Mysql是一种RDBMS. Oracle:收费 Mysql:Oracle旗下免费 Sqlserver:微软 DB2:IBM Postgresql ...

  8. ceph-fuse客户端问题排查流程

    本文讲述了ceph-fuse客户端问题排查基本流程:) 首先查看集群的整体情况 ceph -s 是否有osd挂掉,是否有pg非active ceph-fuse进程是否存在? ps -ef |grep ...

  9. HDU 4283:You Are the One(区间DP)

    http://acm.hdu.edu.cn/showproblem.php?pid=4283 题意:有n个数字,不操作的情况下从左到右按顺序输出,但是可以先让前面的数字进栈,让后面的数字输出,然后栈里 ...

  10. linux上mysql MM(双主)架构及keepalived搭建

    master1 10.1.1.14 VIP 10.1.1.16master2 10.1.1.15 VIP 10.1.1.16 一.mysql MM配置1.修改master1的my.cnf# vi /e ...