webpack配置

最新推荐文章于 2024-04-09 21:02:49 发布

SYWsuperman

最新推荐文章于 2024-04-09 21:02:49 发布

阅读量561

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/qq_45516476/article/details/107146868

版权

webpack

名词解释

何为node?
node是一个服务器端语言,用JavaScript语法,在异步处理编程和并发编程方面表现优秀非常适合做api开发
何为npm?
npm是node的包管理器,和node同时安装,用来下载别人的包,
何为git?
分布式版本管理工具/依赖管理工具

步骤

1.初始化npm

在文件夹下右键git bush here
npm init
确认初始化信息
出现package.json则为初始化成功

2.换源

npm config set registry https://registry.npm.taobao.org
换成淘宝镜像,不需要翻墙

3.下载webpack

npm install --save-dev webpack
写代码的时候启用依赖,上线后不需要

4.配置demo

 webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
    //创建一个div元素
    let element = document.createElement('div');
    // Lodash, currently included via a script, is required for this line to work
    //_是lodash库的名称,用来强化对数组的操作
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}
document.body.appendChild(component());function component() {
    //创建一个div元素
    let element = document.createElement('div');
    // Lodash, currently included via a script, is required for this line to work
    //_是lodash库的名称,用来强化对数组的操作
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    //返回定义好的div标签
    return element;
}
//在body里面插入component()的执行结果
document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

这样这个demo就可以跑起来了,接下来换个配置

5.更改package.json

package.json
这里的更新是说,将index.js打包成main.js

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

6.重新配置demo

project

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

安装lodash模块

npm install --save lodash
//这里没有-dev表明上线以后依旧会用到lodash模块

src/index.js
引入刚刚安装的lodash模块

+ import _ from 'lodash'; //把刚刚安装的lodash模块引进来,命名为_

function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

  document.body.appendChild(component());

dist/index.html

<!doctype html>
<html>
<head>
    <title>Getting Started</title>
</head>
<body>
    <!--引入打包好的main.js -->
    <script src="main.js"></script>
</body>
</html>

7.转换开发者模式

npx webpack
npx是webpack-cli的命令,在webpack3.0webpack和webpack-cli是在一起的,4.0把它们分开了

运行完会出现这一句,意为你想用webpack-cli还是webpack-command
Which one do you like to install (webpack-cli/webpack-command):
输入webpack-cli回车
出现这句,意为正在安装webpack-cli
Installing ‘webpack-cli’ (running ‘npm install -D webpack-cli’)…
运行完出现warning
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
意为选择模式development(开发者模式,会报错易于调试)/production(运行模式,不会报错但相对安全)
选择开发者模式

npx webpack --mode development

8.加入webpack配置文件,并重新启用webpack

project

  webpack-demo
  |- package.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

//引入node路径模块
const path = require('path');

module.exports = {
    //入口文件的配置
    entry: './src/index.js',
    output: {
        //输出文件
        filename: 'main.js',
        //输出路径,__dirname为当前目录
        path: path.resolve(__dirname, 'dist')
    }
};

重新配置webpack

npx webpack --config webpack.config.js
//表示使用webpack.config.js配置

9.打包js文件</

最低0.47元/天解锁文章

SYWsuperman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack配置

webpack名词解释何为node?node是一个服务器端语言,用JavaScript语法,在异步处理编程和并发编程方面表现优秀非常适合做api开发何为npm?npm是node的包管理器,和node同时安装,用来下载别人的包,何为git?分布式版本管理工具/依赖管理工具步骤1.初始化npm在文件夹下右键git bush herenpm init确认初始化信息出现package.json则为初始化成功2.换源npm config set registry https://regi
复制链接

扫一扫