我的WebPack入门(一)

我的WebPack入门(一)

大家好,又见面了,我是全栈君。

WebPack已经火了好久,几乎已经成为一个前端的必备技能,先翻译官网两句话。

  • WebPack是一个灵活的、可扩展的、公平的、可用于生产环境的、开源的模块打包器。

  • WebPack V1版本已经过时,请开发者们升级到V2。

这篇笔记是基于WebPack V2.2.1 开始。

安装(Installation)

  1. npm install webpack -g 全局安装webpack,这样可以在全局使用webpack命令;

  2. 新建webpack文件夹,Terminal/cmd切换到webpack文件夹下,执行npm init -y生成package.json文件

    -y: init过程中会有一堆繁琐的问题,比如包名、作者、描述、依赖等一些东西,通过-y命令可以直接跳过,默认全部“是”。
    PS:因为这里我的文件夹名字起的叫webpack,所以默认生成的package.json中的name就是webpack,而webpack是关键字会导致err,只需要打开package.json把name随便改一下即可。

  3. npm install webpack --save-dev 如果想要安装特定版本的webpack可以使用 npm install webpack@<version> --save-dev,将version换成想要的版本号即可。

    • --savesave 的意思是把安装信息保存到 package.json中,打开package.json会发现多了devDependencies项已经把webpack添加进去了:"devDependencies": {"webpack": "^2.2.1"}

    • -devdev的意思是当前安装插件是放在"devDependencies"中,表示是开发时所需依赖,正式生产环境所需依赖不需要添加-dev,是会放在"Dependencies"

开始(Getting Started)

  1. 首先建好文件目录

    • webpack.config.js:类似gulpfile.js,配置相关设置,我觉得放在根目录下会合适一些,在配置path时会方便一些,执行webpack命令时会默认搜索webpack.config.js文件,也可以通过指定 –config指定其他文件为配置文件

    • app:存放项目文件模块

      • PS:在模块化开发中,这种文件目录是不推荐的,需要依模块来划分文件目录

    • dist:存放webpack处理后的文件

  2. 新建JS/css文件

    • hello.js

const msg = "Hello ";

export default class Hello {

        constructor() {
            this.say = this.say.bind(this);
        }

        say (word)  {
            document.write(msg + word);
        }

        ask ()  {
            document.write("Say Something Please");
            setTimeout(() => this.say("webpack"), 1000);
        }

}
- index.js
import css from "./index.css";
import Hello from "./hello.js";

new Hello().ask();
- index.css
html,body{
    margin:0;
    padding:0;
}
body{
    background:red;
    color: #fff;
    font-size: 40px;
}

3.安装部分所需依赖

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015:因为用到了es6的语法,所以我们需要对es6语法进行转换
npm install style-loader --save-dev css-loader --save-dev: 安装处理css的loader

4.配置webpack.config.js

const path = require('path');

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    }
};

path: path是Node中的内置对象,也是Node的核心模块之一,这里引入path对象,主要是为了控制生成文件的目录path.resolve(__dirname, 'dist')这句话中,resolve会将参数中的路径或路径片段的序列解析为一个绝对路径,__dirname表示当前文件模块所在的完整的绝对路径,这样即使项目迁移,地址变更,只要保证相对路径正确即可。
context: 上下文,这里省略了,默认为当前文件模块的绝对路径,下面的entry和output中的路径都是相对于context上下文的相对路径
entry: 入口文件,如果有多个不同的入口文件,可以写成对象的形式
output:配置webpack打包后输出文件的参数
filename: 输出的文件名,'bundle.[hash].js'中,hash是webpack会生成一个hash值,这里还可以有的写法如:'[name].[hash].js'指的是 入口文件的名字.hash值.js hash也可以改成chunkhash,如果entry中有多个入口文件,则每一次某个文件的改动都会引起所有输出文件hash值得改变,而chunkhash只会影响有改动模块文件。
path: 生成文件的输出路径
modules: 配置不同文件所需要的loaders以及插件配置,至于什么文件需要什么loaders,在官网和很多地方都可以找到说明。

其实关于output/modules都还有很多参数配置和方法,不过对于入门,在上面这些东西搞明白后,就已经可以跑起来一个简单的流程了。更多的知识,在后期遇到其他的痛点时会去搞明白的。

我的WebPack入门(二)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108640.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 搭建邮件服务器 dns,搭建DNS服务器+邮件服务器[通俗易懂]

    一·搭建DNS服务器试验要求:完成DNS的正反向解析试验前准备:服务器192.168.203.201server1.example.com客户机192.168.203.202server2.example.com192.168.203.203database.example.com修改DNSnmclicmodifyeno16777736ipv4.dns8.8.8.8system…

  • Vmware ESX 5.0 安装与部署

    Vmware ESX 5.0 安装与部署

  • MySQL 日期格式时间戳转换函数

    MySQL 日期格式时间戳转换函数简介方便查看函数功能,特摘录在此。平时比较常用的时间、字符串、时间戳之间的互相转换,虽然常用但是几乎每次使用时候都喜欢去搜索一下用法;本文将作为一个笔记,整理一下三者之间的转换(即:date转字符串、date转时间戳、字符串转date、字符串转时间戳、时间戳转date,时间戳转字符串)用法,方便日后查看;涉及的函数date_format(date,format)函数,MySQ…

  • uwsgi部署django_django调用python脚本

    uwsgi部署django_django调用python脚本一.收集静态资源1.settings.py#静态资源访问的起始urlSTATIC_URL=’/static/’#指定静态资源所在的目录STATICFILES_DIRS=[os.path.join(BASE_DIR,’static’)]#设置收集静态资源的路径(部署时使用)STATIC_ROOT=’/home/kzzf/project/OfferHelp…

  • Java–LinkedList真的比ArrayList添加元素快?Open JDK JMH带你揭开真相「建议收藏」

    Java–LinkedList真的比ArrayList添加元素快?Open JDK JMH带你揭开真相「建议收藏」【学习背景】欢迎进来学习的小伙伴~不管你是学生,还是职场小白,还是入行1~3年的小伙伴,相信很多小伙伴在面试Java工作岗位时,发现LinkedList和ArrayList这个问题基本是必面的一道题,【面试场景】当面试官问到LinkedList和ArrayList的区别时,可能很多准备得不够充分的小伙伴第一反应的回答仅仅是这样的:LinkedList底层数据结构是链表,添加和删除元素效率比ArrayList高~ArrayList底层数据结构是数组,查询效率比LinkedList高~面试官:哦

  • js在数组指定位置添加元素_java数组删除指定位置元素

    js在数组指定位置添加元素_java数组删除指定位置元素原文链接:Array:InsertanItemataSpecificIndexwithJavaScript原文日期:2014年07月24日翻译日期:2014年07月26日翻译人员:铁锚很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他。最近我碰到了这样一个需求:将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号