webpack使用

时间 2019-11-13

标签 webpack 使用繁體版

原文原文链接

1、什么是以及为何要使用webpackcss

　　如今的网页功能愈来愈丰富，所须要的JavaScript和模块也会不少，为开发更加简洁，出现了如下方法，如模块化，scss，typescript等。
但有些语法是浏览器没法识别的。因此须要用到webpack。
　　WebPack是模块打包器，它会将浏览器不能支持不能识别的语言语法，打包转换成浏览器可识别的语法，如（Scss，TypeScript等）。

2、webpack 与 gulp 的区别html

二者并没有太多的可比性
一、webpack是为模块化提供解决方案；
二、gulp是前端自动化构建工具。

3、如何使用webpack前端

注：此例以webpack@3.5.3版本为例
另，热更新 服务器webpack-dev-server@2 依托以上版本

实例：node

一、全局安装webpackreact

cnpm install webpack@3.5.3 -g
或
npm install webpack@3.5.3 -g

二、新建一个文件夹，并初始化文件webpack

npm init -y

　　以后，文件夹内会出现一个package.json 的文件web

三、局部安装webpacktypescript

cnpm install webpack@3.5.3 --save-dev

　　以后，文件夹会出现一个node_modules 的文件npm

四、新建webpack.config.js文件夹json

五、建立 src 和dist 文件夹

六、src入口文件中新建index.js文件（书写须要的内容）如：

console.log(222)

七、配置webpack.config.js文件（配置基础部分）

// 引入核心模块
const path = require('path');

// __dirname:当前文件夹的绝对路径
// path.join:链接两个参数，生成新的路径
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 测试，用node webpack.config.js 运行
// console.log(PATH.app)

// webpack配置项
module.exports = {
    entry:{
        // 入口路径，app名字决定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字为app.js
        path:PATH.build
    }
}

　cmd命令中，运行打包命令：

webpack

八、在dist中会生成一个app.js文件，内容以下

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

console.log(222)

/***/ })
/******/ ]);

恭喜！至此，一次简单的打包完成！

但须要注意，以上打包方式仅适合4.0版本如下。4.0以上会有简单的变化。

九、当浏览器遇到不能识别的代码时，须要用到loader

　　提早安装loader，在代码中解释

处理css的loader

               cnpm install --save-dev style-loader css-loader  sass-loader node-sass

处理js的loader

                cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

配置以下：

// 引入核心模块
const path = require('path');

// __dirname:当前文件夹的绝对路径
// path.join:链接两个参数，生成新的路径
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 测试，用node webpack.config.js 运行
// console.log(PATH.app)

// webpack配置项
module.exports = {
    entry:{
        // 入口路径，app名字决定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字为app.js
        path:PATH.build
    },
    // 需提早配置好，解决浏览器不能识别的语法
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/env','@babel/react']
                    }
                }
            },
            {
                test:/\.(css|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

　　cmd命令中，运行打包命令：

webpack

　　在dist 下新建一个index.html 文件，并引入app.js,便可实现

<!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>
    
</body>
</html>
<script src="./app.js"></script>

如今，便可完成对不识别代码的识别，如ES6转为ES5等

以上为手动添加index,html文件

生成html模板（cmd命令）

插件
                cnpm install html-webpack-plugin --save-dev

webp新加plugins 配置

// 引入核心模块
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

// __dirname:当前文件夹的绝对路径
// path.join:链接两个参数，生成新的路径
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 测试，用node webpack.config.js 运行
// console.log(PATH.app)

// webpack配置项
module.exports = {
    entry:{
        // 入口路径，app名字决定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字为app.js
        path:PATH.build
    },
    // 需提早配置好，解决浏览器不能识别的语法
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/env','@babel/react']
                    }
                }
            },
            { 
                test:/\.(css|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    },
    // 插件在plugins中使用 plugins:[ // HtmlWebpackPlugin 为构造函数 new HtmlWebpackPlugin({ // 生成的文件名称 filename:'index.html', // 模板文件 template:'./index.html', }) ]
}

十、减小每次手动运行webpack，须要用热更新

cnpm install webpack-dev-server@2 --save-dev

在package.json 的 script中添加

"scripts": {
    "dev":"webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

而后，cmd中运行

npm run dev

便可完成实时更新。。。。

注src 下的index.js 可导入其余文件，如：body.css，

　　index.js：

import * as obj from './modeleW'

import './body.css'

console.log(222)
console.log(obj.name)
console.log(obj.age)
console.log(obj.sign)

　　body.css：

body{
    background: red;
}

手敲不易，肩膀疼，，，，，