什么是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. 【Python学习之六】文件操作

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 python3.6 一.文件的打开与关闭 使用open函数,可以打开一 ...

  2. IntellJ idea maven打包——项目带有第三方jar包

    今天用maven打包时,提示程序包com.aspose.slides不存在 原来第三方jar是直接导入的,打包时没找到 那项目中带有第三方jar包,怎么打包? 方法: 1.根路径建立lib包,将第三方 ...

  3. 使用SyncNavigator轻松实现数据库异地同步、断点续传、异构同步

    原文地址:https://blog.csdn.net/liushuijinger/article/details/7704410/ 最近一直在研究数据库同步的问题,在网上查了很多资料,也请教了很多人, ...

  4. 【VS开发】MFC滑动条 CSliderCtrl

    在MFC中滑动条(CSliderCtrl)是个常用的控件,用法如下: 主要要方法有: 1.设置.取得滑动范围: void SetRange( int nMin, int nMax, BOOL bRed ...

  5. hihocoder 1566 皇室成员的名字

    #1566 : 皇室成员的名字 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho正在学习世界历史.他发现历史上很多西方国家的皇室成员的名字都是由英文名字加罗马数字组 ...

  6. Influx Sql系列教程三：measurement 表

    在influxdb中measurement相当于mysql中的表,可以理解为一条一条记录都是存与measurent中的,一个数据库中可以有多个measurement,一个measurement中可以存 ...

  7. WEB前后端分离开发中的验证与安全问题

    登录验证以及安全问题: 1.请求接口全部用post方式,在后端判断请求方式是否为post 2.登录密码等敏感信息要加密后传输,如用RSA(支付宝里可下载公私钥生成工具),客户端公钥加密,传到服务器后再 ...

  8. Python模拟知乎登录

    # -*- coding:utf-8 -*- import urllib import urllib2 import cookielib import time from PIL import Ima ...

  9. Luogu4240 毒瘤之神的考验 莫比乌斯反演、根号分治

    传送门 首先有\(\varphi(ij) = \frac{\varphi(i) \varphi(j) \gcd(i,j)}{\varphi(\gcd(i,j))}\),把欧拉函数的定义式代入即可证明 ...

  10. Codeforces Round #569 Div. 1

    A:n-1次操作后最大值会被放到第一个,于是暴力模拟前n-1次,之后显然是循环的. #include<bits/stdc++.h> using namespace std; #define ...