我的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)


相关推荐

  • tabnine 激活码【注册码】

    tabnine 激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Java面向对象的基本特征有哪些?三大基本特征「建议收藏」

    Java面向对象的基本特征有哪些?三大基本特征「建议收藏」Java⾯向对象的三个基本特征是:封装、继承、多态。本文详细为大家解释一下三大基本特征是什么。Java面向对象的基本特征有哪些?1.封装封装最好理解了。封装是⾯向对象的特征之⼀,是对象和类概念的主要特性。封装,也就是把客观事物封装成抽象的类,并且类可以把⾃⼰的数据和⽅法只让可信的类或者对象操作,对不可信的进⾏信息隐藏。2.继承⾯向对象编程(OOP)语⾔的⼀个主要功能就是“继承”。继承是指这样⼀种能⼒:它可以使⽤现有类的所有功能,并在⽆需重新编写原来的类的情况下对这些功能进⾏扩

  • django-filter_汇总表模板

    django-filter_汇总表模板模版常用过滤器在模版中,有时候需要对一些数据进行处理以后才能使用。一般在Python中我们是通过函数的形式来完成的。而在模版中,则是通过过滤器来实现的。过滤器使用的是|来使用。add将传进来的参

  • Android 蓝牙开发之搜索、配对、连接、通信大全

    Android 蓝牙开发之搜索、配对、连接、通信大全关注微信公众号(文强的技术小屋),学习更多技术知识,一起遨游知识海洋~蓝牙(Bluetooth®):是一种无线技术标准,可实现固定设备、移动设备和楼宇个人域网之间的短距离数据交换(使用2.4—2.485GHz的ISM波段的UHF无线电波)。蓝牙设备最多可以同时和7个其它蓝牙设备建立连接,进行通信,当然并不是每一个蓝牙都可以达到最大值。下面,我们从蓝牙的基本概念…

  • 智能哲学:如何判断一台机器是不是人工智能?[通俗易懂]

    智能哲学:如何判断一台机器是不是人工智能?

  • 双边滤波算法原理

    双边滤波算法原理一、引言        双边滤波在图像处理领域中有着广泛的应用,比如去噪、去马赛克、光流估计等等,最近,比较流行的Non-Local算法也可以看成是双边滤波的一种扩展。自从Tomasietal等人提出该算法那一天起,如何快速的实现他,一直是人们讨论和研究的焦点之一,在2011年及2012年KunalN.Chaudhury等人发表的相关论文中,提出了基于三角函数关系的值域核算法,能

发表回复

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

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