什么是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. 一文读懂ZooKeeper (转)

    什么是ZooKeeper ZooKeeper 是一个分布式的,开放源码的分布式应用程序协同服务.ZooKeeper 的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来,构成一个高效可靠的原语集 ...

  2. Python3 列表list合并的4种方法

    方法1: 直接使用"+"号合并列表 aList = [1,2,3] bList = ['www', 'pythontab.com'] cList = aList + bList   ...

  3. k8s 修改节点角色和删除节点

    修改节点角色: kubectl label nodes cn-thin05 node-role.kubernetes.io/node= 卸载节点: kubectl drain jupiter --de ...

  4. Git的各种工作流

    Git工作流可以理解为团队成员遵守的一种代码管理方案,在Git中有以下几种常见工作流: 集中式工作流 功能开发工作流 Gitflow工作流 Forking工作流 1)集中式工作流 这种工作方式跟svn ...

  5. LeetCode 328. 奇偶链表(Odd Even Linked List)

    328. 奇偶链表 328. Odd Even Linked List 题目描述 给定一个单链表,把所有的奇数节点和偶数节点分别排在一起.请注意,这里的奇数节点和偶数节点指的是节点编号的奇偶性,而不是 ...

  6. (转)AS3正则：元子符,元序列,标志,数量表达符

    (转)AS3正则:元子符,元序列,标志,数量表达符: AS3正则:元子符,元序列,标志,数量表达符 七月 4th, 2010 归类于 AS3前端技术 作者Linkjun 进行评论 as3正则:元子符, ...

  7. 我的Vue朝圣之路1

    1. Vue是什么? 1). 一位华裔前Google工程师开发的前端js库         2). 一个MVVM框架         3). 核心概念              * 数据绑定      ...

  8. mysql 字符

    只适用mysql5.0以上的版本: 1.一个汉字占多少长度与编码有关:         UTF-8:一个汉字＝3个字节            GBK:一个汉字＝2个字节 2.varchar(n)表示n ...

  9. git学习笔记 ---版本退回

    我们已经成功地添加并提交了一个readme.txt文件,现在,是时候继续工作了,于是,我们继续修改readme.txt文件,改成如下内容: Git is a distributed version c ...

  10. 【1】BIO与NIO、AIO的区别

    一.BIO 在JDK1.4出来之前,我们建立网络连接的时候采用BIO模式,需要先在服务端启动一个ServerSocket,然后在客户端启动Socket来对服务端进行通信,默认情况下服务端需要对每个请求 ...