历经一天半，菜菜本菜终于配置好webpack哈哈哈哈哈哈哈哈哈哈

前言

1.webpack的版本一直在变，它的语法也在变，最好的就是比对官方文档

https://webpack.js.org 官方文档这才是永远的神，遇到错误去官方文档查看找答案真的很有效

2.配置成功，不代表懂原理，原理很重要，对于后面的配置来说，懂了原理事半功倍。

3.对于版本一直变化，语法也变化的软件来说，一定要找最近的教程来看，否则错误百出

第1步安装nodejs+webpack

注意：CMD要以管理员身份打开,否则在安装webpack那一步一直报错

默认： C:\Windows\System32 --cmd.exe

什么是Node.js？

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境；
Node.js使用一个事件驱动、非阻塞式 I/O 的模型，使其轻量且高效；
Node.js的软件包生态系统npm是全球最大的开源库生态系统。

安装教程

本机环境：Windows 10 64bit操作系统

1.下载安装包

Node.js 官方网站下载：https://nodejs.org/en/download/

下载完成，安装包如下：

2.安装

双击打开安装，下一步下一步即可：

安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号，如下图所示：

安装完成后系统目录如图所示（其中，npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理）：

3.配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：

然后在cmd命令下执行如下两个命令，配置路径：

npm config set prefix "D:\Install\nodejs\node_global"
npm config set cache "D:\Install\nodejs\node_cache"

执行命令，如下图所示：

（输入指令后，命令行闪一下，不会有任何提示）

执行完后，配置环境变量,分别新建用户变量PATH和系统变量NODE_PATH，如下：

"此电脑"->“属性”->"高级系统设置"->“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”，值为“D:\Install\nodejs\node_global”，如下图：

这是最重要的一点;在安装webpack后出现'webpack' 不是内部或外部命令的问题就是因为路径不对

PATH和NODE_PATH全部设置为：D\Install\nodejs\node_global。

看到网上的设置方法为：NODE_PATH属性指向D:\Install\nodejs\node_global\node_modules,这样设置并不对，就会导致报不是内部命令

“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“D:\Install\nodejs\node_global”，如下：

配置完成。

4.安装webpack及webpack-cli

在cmd命令下执行 npm i -g webpack webpack-cli 安装webpack，如下图所示：

前端包管理工具npm, bower and grunt

也可以切换到本地目录在安装一遍，当然全局安装就可以了，

可以忽略本地安装：因为我在D:\vue-exe\blue\es6\module 下练习项目，所以定为本地位置，命令：npm i webpack webpack-cli

安装成功，自动生成文件夹如下所示：

在cmd命令下执行 webpack -v 查看webpack版本，如提示：

注意：安装webpack 过程中报错是因为没在管理员下安装

----------------------------------------------------------------------

wepack安装命令

webpack和webpack-cli这两个都需要装上

这两个是互相配合的，一开始就是两个都需要装

-g 全局安装, i 是install 的简写

npm i -g webpack webpack-cli 全局安装（可要任何位置安装）

npm i webpack webpack-cli 本地安装（在本地目录下）

两个本地，两个全局，正常使用webpack时，这四个库都要装，当然全局的装一遍就行了

web

--save 写入到 dependencies 对象 -S就是--save

--save-dev 写入到 devDependencies 对象

----------------------------------------------------------------------

第2步配置mode依赖

Provide the mode option in the config:

module.exports = {
  mode: 'development',
};

or pass it as a CLI argument:

webpack --mode=development

第3步测试你的webpack打包功能

首先在桌面新建一个 webpacktest 文件夹
打开命令行工具，进入 webpacktest 文件夹中

cd Desktop
cd webpacktest

安装 webpack

//先在全局安装
cnpm install webpack -g
//再在项目中安装
cnpm install webpack --save-dev

在项目中新建一个 webpack.config.js 文件
编辑 webpack.config.js 文件

var webpack = require('webpack');
console.log(webpack);//测试 webpack 是否安装成功

在命令行中运行，查看输出是否成功
node webpack.config.js

输出如下图所示的一个对象即表示成功了

image.png

接下来就是引入比较核心的东西

var webpack = require('webpack');
//最核心的模块，所有的东西都要在这里面进行
module.exports = {

}

接下来就要建网站了，一般是通过这样的形式：在项目中新建 src 和 build 文件夹
文件是在 src 文件夹中编辑然后 build 到 build 文件夹中上线上的是 build 文件夹
文件结构如下

src -> stylesheets -> index.css
src -> scripts -> app.js
src -> scripts -> index.js
src -> index.html
build -> stylesheets
build -> scripts

开始编辑文件
index.js

var s = function(data) {
    //console.warn 向web 控制台输出一条警告信息
    console.warn(data);
}
//切记这里要按照模块的规范一样将要导出的东西导出，这里我们将函数 s 导出去了
module.exports.fn = s;

app.js

var index = require('./index.js');
index.fn('init index');

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个webpacktest</title>
</head>
<body>
    Hello Webpack
</body>
</html>

index.css

body{
    background: black;
    color: green;
}

webpack.config.js

var webpack = require('webpack');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块，所有的东西都要在这里面进行
module.exports = {
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry:__dirname + 'src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output:{
        path:__dirname + 'build/scripts',
        //hash 表示的是：平常的 index.js 编译后就变成了 index.assxx.js
        filename:'[name]-[hash].js'
    }
}

在命令行中 webpacktest 目录下运行程序

webpack

显示如下图所示代表执行成功了

image.png

到项目中的 build -> scripts 文件夹中查看会发现多了一个编译后的 .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, __webpack_require__) {

var index = __webpack_require__(1);
index.fn('init index');

/***/ }),
/* 1 */
/***/ (function(module, exports) {

var s = function(data) {
    //console.warn 向web 控制台输出一条警告信息
    console.warn(data);
}
//切记这里要按照模块的规范一样将要导出的东西导出，这里我们将函数 s 导出去了
module.exports.fn = s;

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

这个时候需要在 html 中将这个编译过后的 .js 文件引过来，需要安装一个包 html-webpack-plugin

参考链接：https://www.npmjs.com/package/html-webpack-plugin

npm install html-webpack-plugin --save-dev

配置插件 plugins
编辑 webpack.config.js 文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块，所有的东西都要在这里面进行
module.exports = {
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry: __dirname + '/src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output: {
        path: __dirname + '/build',
        //hash 表示的是：平常的 index.js 编译后就变成了 index.assxx.js
        filename: 'scripts/[name]-[hash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({ // Also generate a test.html 
            filename: 'index.html',
            template: __dirname + '/src/index.html'
        })
    ]
}

命令行中执行

webpack

结果如下图所示，证明成功了

image.png

此时去查看 build 文件夹，会发现多了一个 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个webpacktest</title>
</head>
<body>
    Hello Webpack
<script type="text/javascript" src="scripts/main-dc8843a6a69bfa4cd69e.js"></script></body>
</html>

在浏览器中打开 index.html 页面会如下图显示

image.png

配置别名 resolve
编辑 webpack.config.js 文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块，所有的东西都要在这里面进行
module.exports = {
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry: __dirname + '/src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output: {
        path: __dirname + '/build',
        //hash 表示的是：平常的 index.js 编译后就变成了 index.assxx.js
        filename: 'scripts/[name]-[hash].js'
    },
    plugins: [
        new HtmlWebpackPlugin({ // Also generate a test.html 
            filename: 'index.html',
            template: __dirname + '/src/index.html'
        })
    ],
    resolve:{
        extensions:['.js','.css']
    }
}

然后修改 app.js 文件第一行

var index = require('./index');

将 build ->scripts 中的两个编译后的 .js 文件删掉

再在命令行中执行程序

webpack

如下图所示即表示成功了

image.png

接下来开始引入 css 文件
编辑 app.js 文件

var index = require('./index');
require('../stylesheets/index');
index.fn('init index');

此时运行程序

webpack

会报如下所示的错误

image.png

这个报错是因为对 css 文件编译失败了需要另一个 loader

资源处理 module 模块
css 处理后实际上会被打包到 js 里

编辑 webpack.config.js 文件

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// console.log(webpack);//测试 webpack 是否安装成功   

//最核心的模块，所有的东西都要在这里面进行
module.exports = {
    mode: 'development',
    //配置入口资源
    //它的值可以是对象也可以是单一的一个
    entry: __dirname + '/src/scripts/app.js',
    //配置编译后的资源
    //将编译后的资源放到哪去
    output: {
        path: __dirname + '/build',
        //hash 表示的是：平常的 index.js 编译后就变成了 index.assxx.js
        filename: 'scripts/[name]-[hash].js'
    },
    //配置插件
    plugins: [
        new HtmlWebpackPlugin({ // Also generate a test.html 
            filename: 'index.html',
            template: __dirname + '/src/index.html'
        })
    ],
    module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'style-loader' },
        ],
     },
    //配置扩展名
    resolve: {
        extensions: ['.js', '.css']
    }
}

此时运行程序

webpack

会报出如下图所示的错误

image.png

这个错是因为我们并没有安装所使用的 loader

接下来进行安装两个 loader

cnpm install css-loader --save
cnpm install style-loader --save

装完之后在执行

webpack

如下图所示表示成功了

image.png

此时在浏览器中打开 build -> index.html 文件，css js 什么的就都有了

image.png

总结：
loader 的用法

image.png

用 require 的方式

image.png

在 webpack.config.js 文件中配置

image.png

通过命令行的方式

image.png

常见的 loader

image.png

webpack 使用优化

image.png

image.png

image.png

image.png

image.png

image.png

image.png

webpack 主要的就是 webpack.config.js 中五个模块的配置。

参考链接：http://webpack.github.io/ webpack 官网

webpack 2

image.png

posted @ 2021-05-10 18:06 zhustarstar 阅读(41) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

zhuya521

历经一天半，菜菜本菜终于配置好webpack哈哈哈哈哈哈哈哈哈哈

前言

https://webpack.js.org 官方文档这才是永远的神，遇到错误去官方文档查看找答案真的很有效

第1步安装nodejs+webpack

什么是Node.js？

安装教程

1.下载安装包

2.安装

3.配置npm在安装全局模块时的路径和缓存cache的路径

4.安装webpack及webpack-cli

第2步配置mode依赖

第3步测试你的webpack打包功能

公告

zhuya521

历经一天半，菜菜本菜终于配置好webpack哈哈哈哈哈哈哈哈哈哈

前言

https://webpack.js.org 官方文档这才是永远的神，遇到错误去官方文档查看找答案真的很有效

第1步 安装nodejs+webpack

什么是Node.js？

安装教程

1.下载安装包

2.安装

3.配置npm在安装全局模块时的路径和缓存cache的路径

4.安装webpack及webpack-cli

第2步 配置mode依赖

第3步 测试你的webpack打包功能

公告

第1步安装nodejs+webpack

第2步配置mode依赖

第3步测试你的webpack打包功能