Webpack4 新手完全攻略

  • 为了优化前端工程, 我们通常会将静态文件压缩,减少带宽占用; 将静态文件合并,减少http请求, webpack可以轻易实现静态文件的压缩合并以及打包的功能, 除此之外, webpack还支持众多的loader插件, 通过loader插件可实现众多类型(如vue, less, jpg, css)资源的打包
  • webpack的文档写的相当出色, 为了方便读者学习, 下面每一类配置的注释里, 都附上了参考的原文档地址, 如果以后配置更新了,也方便查看更新的文档
  • 如果不想自己配置, 可以直接拷贝最后的配置文档到自己的项目中, 所有的案例资源附在了文章末尾, 欢迎下载学习

Webpack

新建项目start-webpack, 初始化npm

mkdir start-webpack
cd start-webpack
npm init -y
  • 初始化后, npm自动创建npm配置文件

初始化

通过npm, 安装webpack

npm install -D webpack
# webpack4.0 需要 额外安装webpack-cli
npm install -D webpack-cli
  • 这里的-D表示只在开发阶段使用webpack, 最终打包上线的项目并不需要webpack

安装后

手动建立webpack配置文件webpack.config.js

webpack.config.js

创建四个文件

配置package.json,自定义webpack打包命令 官方参考

官方参考 https://webpack.js.org/guides/getting-started/

build

  • 运行命令npm run webpack, 进行打包, 获得 ./dist/bundle.js
npm run webpack

打包文件

  • 测试打包效果

打包成功

静态文件打包(以css, 图片为例)

# 解决html的输出到dist  参考: https://webpack.js.org/guides/output-management/
npm install -D html-webpack-plugin
# 增加对css的支持 参考: https://webpack.js.org/guides/asset-management/#loading-css
npm install -D style-loader css-loader
# 增加对图片的支持 参考: https://webpack.js.org/guides/asset-management/#loading-images
npm install -D file-loader

支持less转义打包

# 安装 less-loader less 参考:https://webpack.js.org/loaders/less-loader/ 
npm install -D less-loader less

支持es6语法转义

# es6语法转义到es5 参考: https://webpack.js.org/loaders/babel-loader/
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
# 使用垫脚片polyfill, 将es6的api实现出来 参考: https://babeljs.io/docs/usage/polyfill/
npm install --save babel-polyfill

加载使用第三方包 (项目优化方案)

单独加载第三方包

# 如果将vue打包到bundle.js会增大bundle.js的体积, 所以我们配置使用全局的第三方包, 参考: https://webpack.js.org/configuration/externals/
npm install -S vue

支持vue.js打包

# 支持vue单文件组件加载, 参考:https://vue-loader.vuejs.org/guide/
npm install -D vue-loader vue-template-compiler

支持自动打包, 支持热重载

保存即生效,无需刷新更新数据

# 自动打包工具  参考: https://webpack.js.org/guides/development/
npm install -D webpack-dev-server
# 支持热重载(vue子组件可无刷新更新数据), 参考: https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

发包目录

最终项目结构

  • 发包命令: npm install --production

生产环境目录


最终webpack.conf.js配置文件信息:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');

module.exports = {

    // 设置垫脚片,设置js入口
    entry: ['babel-polyfill', './src/index.js'],
    // 使用开发服务器, 将服务运行在dist目录中(其实是虚拟于内存中的)
    // 为了解决第三方包的路径问题, 我们将'./dist'改为'./'
    devServer: {
        // 设置虚拟目录所在位置
        // contentBase: './dist'
        contentBase: path.join(__dirname, "./"),
        // 自动压缩输出的文件
        compress: true,
        // 测试端口为 9000
        port: 9000,
        // 热更新组件
        hot: true
    },
    // 解决index.html输出到dist的问题
    plugins: [
        new HtmlWebpackPlugin({
            title: "主页",
            template: "./page.html"
        }),
        new VueLoaderPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 单独 加载使用第三方包
    externals: {
        jquery: 'jQuery',
        vue: 'Vue'
    },
    // 设置 js 输出位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // 解决加载css资源
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 解决加载图片资源
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解决加载 less资源
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // 3. 通过js 以内联样式 插入到页面中
                }, {
                    loader: 'css-loader' // 2. 把css 转化到 js
                }, {
                    loader: 'less-loader' // 1. 把less编译成css
                }]
            },
            // 解决es6转为es5
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            // 支持vue的加载
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
};

最终package.json

{
  "name": "start-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.46",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.46",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.2",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.0.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "@babel/preset-env": "^7.0.0-beta.46",
    "@babel/runtime": "^7.0.0-beta.46",
    "babel-loader": "^8.0.0-beta.2",
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "vue": "^2.5.16"
  }
}

结合以上配置, 用vue组件化的方式写了一个简单的页面

demo

教程涉及到的资源我都通过百度网盘分享给大家,为了便于大家的下载,资源整合到了一张独立的帖子里,链接如下: http://www.jianshu.com/p/4f28e1ae08b1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java学习网

http错误码对照表

http错误码对照表 2xx 成功 200 正常;请求已完成。 201 正常;紧接 POST 命令。 202 正常;已接受用于处理,但处理尚未完成。...

24170
来自专栏云计算教程系列

如何在Debian 8上用mod_proxy将Apache设置为反向代理

reverse proxy(反向代理)是一种代理服务器,它接收HTTP(S)请求并将它们透明地分发到一个或多个后端服务器。反向代理非常实用,因为许多现代Web应...

12930
来自专栏腾讯云Elasticsearch Service

Elasticsearch跨集群数据迁移之离线迁移

用户在腾讯云上自建的ES集群或者在其它云厂商购买的ES集群,如果要迁移至腾讯云ES,用户可以根据自己的业务需要选择适合自己的迁移方案。如果业务可以停服或者可以暂...

3.8K90
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Ajax(一)服务器相关概念

服务器和客户端都是电脑,在硬件层面上没有明显的划分,配置很差的个人电脑任然可以作为服务器。

15020
来自专栏技术栏

Nginx 每天莫名自动重启问题

最近在做基于openresty的waf,在测试openresty的过程中用openresty替代了原nginx,结果第二天又自动切换回了原nginx,通过ps ...

41480
来自专栏Lambda

Ubuntu下SVN安装和配置

Ubuntu下SVN安装和配置 一、SVN安装 1.安装包 1.$ sudo apt-get install subversion 2.创建项目目...

34070
来自专栏云计算教程系列

如何在Ubuntu 16.04上将Redis服务器设置为PHP的会话处理程序

Redis是一个开源键值缓存和存储系统,由于其对多种数据类型(如散列,列表,集合和位图等)的高级支持,也称为数据结构服务器。它还支持群集,使其在高度可用和可扩展...

15330
来自专栏程序员互动联盟

【记忆卡片】linux网络命令

一、ifconfig是查看网卡的信息 ifconfig [Interface] Interface是可选项,如果不加此项,则显示系统中所有网卡的信息。如果添加此...

34250
来自专栏陈树义

Java并发编程:线程的基本状态

一、线程的基本状态 线程基本上有5种状态,分别是:NEW、Runnable、Running、Blocked、Dead。 1)新建状态(New) 当线程对象对创建...

35970
来自专栏Java成神之路

Linux_总结_01_VMware14虚拟机下安装CentOS7.x

1.3K20

扫码关注云+社区

领取腾讯云代金券