什么是Webpack

顾名思义它是一个前端打包工具，通过给定的入口文件自动梳理所有依赖资源（包括css、图片、js等），并按照配置的规则进行一系列处理（转es5、压缩等），打包生成适合现代生产环境要求的文件。同时也借此竖起技术壁垒，防止后端改代码[滑稽]。

npm基本操作

现今前端体系构建在node之上，npm是node的包管理器。webpack、babel等只是工具包，都通过npm安装。

初始化新项目

npm init

全局安装依赖包PACKAGE，不属于具体哪个项目

npm install --global PACKAGE

安装运行时依赖包PACKAGE，会打包至最终生成文件

npm install --save PACKAGE

安装开发时依赖包PACKAGE，不会出现在生成文件中。webpack就属于开发时用来打包文件，在运行时就不需要它了。

npm install --save-dev PACKAGE

执行命令，具体命令配置在package.json中

npm run COMMAND

同时以上安装依赖命令也有简写模式

npm i -g PACKAGE

npm i -S PACKAGE

npm i -D PACKAGE

编写源码

创建并进入项目文件夹

mkdir packme

cd packme

初始化项目

npm init

//之后根据提示输入或默认即可。

创建目录app存放源文件

mkdir app

编写源代码

//Anim.js

class Anim {

    constructor(name = 'unnamed') {

        this.name = name;

    }

    speak() {

        return `hey, i am ${this.name}`;

    }

}

export default Anim;

//Sheep.js

import Anim from './Anim.js'

class Sheep extends Anim {

    constructor(name, age) {

        super(name);

        this.age = age;

    }

}

export default Sheep;

//index.js

import Sheep from './Sheep.js';

import base from './base.css';

import index from './index.css';

let sheep = new Sheep('doly', 1);

let target = document.getElementById('logs');

target.innerHTML = sheep.speak();

/*base.css*/

html,

body {

    padding: 0;

    margin: 0;

    height: 100%;

}

/*index.css*/

#logs {

    border: 1px solid #ccc;

    height: 80px;

    overflow: auto;

} 
<!-- index.tpl.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>Document</title>

</head>

<body>

    <div id="logs"></div>

</body>

</html>

整体项目目录如图所示

构建目标

源码编写好了，梳理一下我们的构建目标。

js使用了es6，需要转换成es5

js合并到一个文件

压缩js

css合并到一个文件

压缩css

开始构建

安装依赖包

//webpack 负责整个流程

npm i -D webpack

//babel 负责es6转换

npm i -D babel-core babel-cli babel-loader babel-preset-es2015

//压缩js

npm i -D terser-webpack-plugin

//抽取处理过的css到单独文件（默认css会被当作模块引入js中）

npm i -D mini-css-extract-plugin

//压缩css

npm i -D optimize-css-assets-webpack-plugin

//将打包后的js、css插入指定html

npm i -D html-webpack-plugin

创建webpack配置文件

//webpack.config.js

//配置文件本身是js，它交给node执行。所以可以使用模块语法、特殊变量等特性。

//声明引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const TerserJsPlugin = require('terser-webpack-plugin');

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

    mode: 'production',//production默认会压缩代码，development则不会。

    devtool: 'cheap-module-source-map',//控制生成sourceMap的方式

    entry: __dirname + '/app/index.js',//入口文件，多个入口可以对象kv方式传入

    output: {

        path: __dirname + '/build',

        filename: 'bundle-[contenthash:8].js'

    },

    optimization: {

        minimizer: [ //配置js、css压缩器

            new TerserJsPlugin({

                cache: true,

                parallel: true,

                sourceMap: true

            }),

            new OptimizeCssAssetsPlugin()

        ]

    },

    module: {//配置不同文件的处理规则，

        rules: [{

                test: /\.js$/,

                exclude: /node_modules/,

                loader: 'babel-loader',

                query: {//指定babel使用的参数

                    presets: ['es2015']

                }

            },

            {

                test: /\.css$/,

                use: [//多个处理器从后往前调用，先预处理好css再抽取到文件

                    MiniCssExtractPlugin.loader,

                    'css-loader'

                ]

            }

        ]

    },

    plugins: [//配置处理插件

        new HtmlWebpackPlugin({//根据指定模板生成html,包含打包的后js、css

            template: __dirname + '/app/index.tpl.html',

            minify: {

                minimize: true,

                collapseWhitespace: true,

                minifyCSS: true,

                minifyJS: true

            }

        }),

        new MiniCssExtractPlugin({//合并的css文件配置

            filename: 'style-[contenthash:8].css',

            ignoreOrder: false

        })

    ],

    devServer: {//开发服务器，便于浏览器测试访问

        contentBase: './build',

        port: 8090,

        historyApiFallback: true,

        inline: true

    }

}

添加构建命令

//package.json

//修改scripts配置，加入相关命令

    "scripts": {

        "build": "webpack",

        "dev": "webpack-dev-server"

    },

执行构建

//开启本地服务器，只用一次

npm run dev

//执行webpack构建

npm run build　　

构建结束，在build目录下生成新文件

Webpack快速入门的更多相关文章

  1. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  3. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  4. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  5. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  6. webpack快速入门——配置文件：服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  7. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  8. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  9. webpack快速入门——插件配置：HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  10. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

随机推荐

  1. pytest+allure测试框架搭建

    https://blog.csdn.net/wust_lh/article/details/86685912 https://www.jianshu.com/p/9673b2aeb0d3 定制化展示数 ...

  2. ASP.NET Core Restful Web API 相关资源索引

    GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...

  3. LeetCode 74. 搜索二维矩阵(Search a 2D Matrix)

    74. 搜索二维矩阵 74. Search a 2D Matrix 题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. ...

  4. c++基础（三）——容器

    1. 顺序容器 vector和string将元素保存在连续的内存空间中.由于元素是连续存储的,由元素的下标来计算其地址是非常快速的.但是在这两种容器的中间位置添加或删除元素就非常耗时 list和for ...

  5. centos7简单部署rancher

    rancher官网文档地址 https://www.cnrancher.com/docs/rancher/v2.x/cn/overview/ 准备机器 两台虚拟机 192.168.56.100 192 ...

  6. MySql取消密码强度验证功能

    一.修改MySql配置文件(my.cnf)一般情况下,MySql的配置文件 my.cnf 会在  /etc/ 目录下,如果没有,可以使用以下命令查找位置: find / -name my.cnf 编辑 ...

  7. JDBC使用8.0驱动包连接mysql设置时区serverTimezone

    驱动包用的是新版 mysql-connector-java-8.0.16.jar新版的驱动类改成了com.mysql.cj.jdbc.Driver新版驱动连接url也有所改动I.指定时区 如果不设置时 ...

  8. ConsoleLoggerExtensions.AddConsole(ILoggerFactory)已过时代码修复

    0x00.问题 netcoreapp2.2环境下, Startup.cs 代码配置如下 public void Configure(IApplicationBuilder app, IHostingE ...

  9. .net core使用ocelot---第三篇 日志记录

    简介 .net core使用ocelot---第一篇 简单使用 .net core使用ocelot---第二篇 身份验证使用 上篇介绍使用asp.net core 创建API网关.本文将介绍Ocelo ...

  10. oracle 触发器的实例(转)

    触发器使用教程和命名规范 目  录 目录 触发器使用教程和命名规范 1 1,触发器简介 1 2,触发器示例 2 3,触发器语法和功能 3 4,例一:行级触发器之一 4 5,例二:行级触发器之二 4 6 ...