一、简介

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，less, TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

二、起步

1.打开cmd，创建一个demo

mkdir webpack4-demo && cd webpack4-demo

2.初始化package

npm init -y

3.安装webpack及webpack-cli

npm i webpack webpack-cli -D

4.创建index.html和index.js

mkdir src dist && touch src/index.js dist/index.html

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>webpack4</title>

</head>

<body>

  <script src="./bundle.js"></script>

</body>

</html>

index.js

let h1 = document.createElement('h1');

h1.innerHTML = 'hello webpack4';

document.body.appendChild(h1);

5.创建webpack.config.js

 mkdir config && touch config/webpack.config.js

webpack.config.js

const path = require('path');

const modules = {

  entry: './src/index.js',

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, '../dist')

  }

}

module.exports = modules;

entry入口js，output输出文件，filename文件名称，path文件存放位置

6.修改package.json

"scripts": {

    "build": "webpack --config config/webpack.config.js"

  },

7.打包

npm run build

打开index.html，能够看到Hello webpack4

三、常用API

1.加载css

1）安装并添加 style-loader 和 css-loader

npm install --save-dev style-loader css-loader

2）在src文件下添加style.css

h1 {

  color: red;

}

3）在index.js引入style.css

import './style.css';

4）在webpack.config.js添加module，和output同级

module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          'style-loader',

          'css-loader'

        ]

      }

    ]

  }

2.加载less

1）安装并添加less less-loader

npm install --save-dev less less-loader

2）在webpack.config.js配置

rules: [

      {

        test: /\.(css|less)$/,

        use: [

          'style-loader',

          'css-loader',

          'less-loader'

        ]

      }

    ]

3）在index.js引入less文件

import './style.less'

3.加载scss

1）安装并添加node-sass  sass-loader

npm install  node-sass sass-loader --save-dev

如果node-sass安装不成功，请尝试

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D

2）配置webpack.config.js

{

        test: /\.scss$/,

        use: [

          'style-loader',
　　　　　　'css-loader',

          'sass-loader'

        ]

      }

3）在index.js里引入style.scss文件

import './style.scss'

4.css分离

1）安装extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next

对于webpack4版本，必须装extract-text-webpack-plugin最新版本

2）配置webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module: {

    rules: [

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: "css-loader"

        })

      },

      {

        test: /\.less$/i,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: ['css-loader', 'less-loader']

        })

      },

      {

        test: /\.scss$/i,

        use: ExtractTextPlugin.extract({

          fallback: 'style-loader',

          use: ['css-loader', 'sass-loader']

        })

      }

    ]

  },

  plugins: [

    new ExtractTextPlugin('style.css'),

  ]

3）在index.js引入.css .less .scss 文件打包即可

5.加载图片

1）安装并添加file-loader

npm install --save-dev file-loader

2）在webpack.config.js中配置

module: {

    rules: [

      {

        test: /\.(png|svg|jpg|gif)$/,

        use: [

          'file-loader'

        ]

      },

    ]

  }

3）在src文件夹下添加icon.png，在index.js引入

import Icon from './icon.png';

4）在js或css引用图片

var myIcon = new Image();

myIcon.src = Icon;

element.appendChild(myIcon);

// css

background: url('./icon.png');

6.加载字体

1）在webpack.config.js配置

module: {

    rules: [

      {

        test: /\.(woff|woff2|eot|ttf|otf)$/,

        use: [

          'file-loader'

        ]

      }

    ]

  }

2）在src文件夹下添加my-font.woff，在style.css中添加如下代码

 @font-face {

     font-family: 'MyFont';

     src: url('./my-font.woff') format('woff');

     font-weight: ;

     font-style: normal;

   }

  h1 {

    font-family: 'MyFont';

  }

通过配置好 loader 并将字体文件放在合适的地方，你可以通过一个 @font-face 声明引入。本地的 url(...) 指令会被 webpack 获取处理，就像它处理图片资源一样

7.es6/es7转换为es5

1）安装@babel/core @babel/preset-env babel-loader

npm i -D @babel/core babel-loader @babel/preset-env

注意：对于babel-loader@7.x，要安装babel-core  和 babel-preset-env；对于babel-loader@8.x，要安装@babel/core @babel/preset-env

2）配置.babelrc

{

  "presets": [

    "@babel/preset-env"

  ]

}

3）配置webpack.config.js

 module: {

    rules: [

      {

        test: /\.js$/,

        exclude: '/node_modules/',

        loader: 'babel-loader'

      }

    ]

  }

4）@babel/polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如数组的find、includes、from都不会转码。如果想使用这些方法，必须使用babel-polyfill，为当前环境提供一个垫片。

npm install --save-dev @babel/polyfill

在index.js引入或者在webpack.config.js的entry引入

// index.js

import '@babel/polyfill';

// 或者在 webpack.config.js

entry: ['@babel/polyfill', './src/index.js'],

补充：

1.babel-polyfill 和 babel-runtime

babel-polyfill：当运行环境中并没有实现的一些方法，babel-polyfill中会给做兼容
babel-runtime：将es6编译成es5
优缺点：
babel-polyfill：引入polyfill，前端就可以放心的在代码里用es6的语法来写；但是这样会造成全局空间污染，代码量比较大。
babel-runtime：不会污染全局对象和内置的对象原型。比如当前运行环境不支持promise，可以通过引入babel-runtime/core-js/promise来获取promise，或者通过babel-plugin-transform-runtime自动重写你的promise。缺点是不支持find、includes、Object.assign等方法。

2.babel-plugin-transform-runtime 和 babel-runtime

在babel编译es6到es5的过程中，babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性，这些polyfill包就是在babel-runtime这个包里

8.压缩js

1）配置webpack.config.js

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

plugins: [

    new UglifyJSPlugin()

  ],

2）如果报错 Cannot find module 'uglifyjs-webpack-plugin'，需要安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

9.配置typescript

1）安装typescript ts-loader

npm install --save-dev typescript ts-loader

2）在根目录下添加tyconfig.json index.ts

tyconfig.json

{

  "compilerOptions": {

    "outDir": "./dist/",

    "noImplicitAny": true,

    "module": "es6",

    "target": "es5",

    "jsx": "react",

    "allowJs": true

  }

}

index.ts

let isTs: boolean = true;

console.log(isTs)

3）配置webpack.config.js

const path = require('path');

module.exports = {

  entry: './src/index.ts',

  mode: 'production',

  module: {

    rules: [

      {

        test: /\.tsx?$/,

        use: 'ts-loader',

        exclude: /node_modules/

      }

    ]

  },

  resolve: {

    extensions: ['.tsx', '.ts', '.js']

  },

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, '../dist')

  }

};

参考：

1.https://www.webpackjs.com/guides/

2.https://www.jianshu.com/p/d2c5d5190641

3.http://es6.ruanyifeng.com/#docs/intro#Babel-转码器

4.https://www.jianshu.com/p/a16a34eb597e

5.https://segmentfault.com/q/1010000012041869/a-1020000012044930

webpack4 入门（一）的更多相关文章

  1. webpack4入门

    前提 已安装node(版本号>4.0,已自带NPM) mac机器 有一个空目录 无webpack.config.js配置打包 快速构建package.json文件. npm init -y 安装 ...

  2. webpack4入门到进阶案例实战课程

    愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...

  3. webpack4入门配置

    下面是抄过来的,方便自己翻越 webpack4.x入门配置   1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...

  4. 显微镜下的webpack4入门

    前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...

  5. 【Cute-Webpack】Webpack4 入门手册（共 18 章）

    介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...

  6. webpack4 入门配置研究

    1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...

  7. webpack4.*入门笔记

    全是跟着示例做的.看下面文章 入门 1.nodejs基础 http://www.runoob.com/nodejs/nodejs-tutorial.html 2.NPM 学习笔记整理 https:// ...

  8. webpack4 入门（二）

    一.管理输出 1.多入口配置 entry: { index1: './src/index.js', index2: './src/index2.js' }, output: { filename: ' ...

  9. 【Redis】349- Redis 入门指南

    点击上方"前端自习课"关注,学习起来~ 1. 概述 1.1. Redis 简介 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存储键和五种不同类型的值之间的映 ...

随机推荐

  1. Erlang pool management -- RabbitMQ worker_pool 2

    上一篇已经分析了rpool 的三个module , 以及简单的物理关系. 这次主要分析用户进程和 worker_pool 进程还有worker_pool_worker 进程之间的调用关系. 在开始之前 ...

  2. 关于jsp和html页面中的三种弹出框

    代码: <!-- 引入jquery 由于在下面使用jquery选择器,与弹出框无关 --> <script type="text/javascript" src= ...

  3. MySQL执行计划的讲解

    最近同事在执行线上执行一条MySQL的查询语句,数据的话在9000条左右,但使用左连接的时候查询速度大概在15秒左右~这速度确实是无法接受的~ 经过简单的修改,变为内连接的话,执行速度不到1秒. 下面 ...

  4. 需要network lightweight filter disk 上的文件netft.sys

    小米wifi在win10下安装不成功,需要network lightweight filter disk 上的文件ntflt.sys 默认路径有问题,改成下面的路径好了! 选择下面第一个路径安装成功了 ...

  5. IDEA创建Maven项目一直显示正在加载的问题

    在用idea创建maven项目的时候 有时候会出现下面这种情况 出现原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需 ...

  6. ViewPager的使用方法

    首先是 导入jar包   下载地址:android-support-v4.jar 布局文件里添加viewPager布局 [html] view plaincopy <android.suppor ...

  7. 第5章 选举模式和ZooKeeper的集群安装 5-1 集群的一些基本概念

    xx就是我们的master,也就是我们的主节点.心跳机制,当有一个节点挂掉之后,整个集群还是可以工作的.选举模式,我们现在的master是正常运行的,但是在某些情况下它宕机了死机了,那么这个时候它这个 ...

  8. POJ 1191 棋盘分割 （区间DP，记忆化搜索）

    题面 思路:分析公式,我们可以发现平均值那一项和我们怎么分的具体方案无关,影响答案的是每个矩阵的矩阵和的平方,由于数据很小,我们可以预处理出每个矩阵的和的平方,执行状态转移. 设dp[l1][r1][ ...

  9. SQL 连贯操作 [2]

    1.alias 用于设置数据表别名 $user = M('User'); var_dump($user->alias('anothername')->select()); 这时在SQL中的 ...

  10. array_unique() 函数移除数组中的重复的值

    array_unique() 函数移除数组中的重复的值,并返回结果数组. 当几个数组元素的值相等时,只保留第一个元素,其他的元素被删除. 返回的数组中键名不变.