我的WebPack入门（一）

2024年3月16日 190次阅读 来源: 前端老李

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换成想要的版本号即可。

    • --save：save 的意义是把装置信息保存到 package.json中，翻开package.json会发明多了devDependencies项已把webpack增加进去了："devDependencies": {"webpack": "^2.2.1"}；

    • -dev：dev的意义是当前装置插件是放在"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入门（二）

    原文作者：前端老李
    原文地址: https://segmentfault.com/a/1190000008560694
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞