历经一天半,菜菜本菜终于配置好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