NodeJs学习笔记 - webpack安装

﹏ヽ暗。殇╰゛Y 2023-02-09 13:12 11阅读 0赞

### NodeJs学习笔记 - webpack安装 ###

*  初始化 Nodejs 项目
 *   *  1. 初始化 nodejs 项目
     *  2. 安装 jquery 包
     *  3. 新建 \`src\` 目录，添加 index.html, index.js 文件
 *  安装配置 webpack
 *   *  1. 安装 webpack 相关包
     *  2. 根目录下添加 webpack 配置文件 \`e:/projectroot/webpack.config.js\`
     *  3. \`e:/projectroot/package.json\` 的 \`scripts\` 节点
     *  4. 执行构建
 *  index.html 页面效果
 *  目录结构
 *  学习资料

# 初始化 Nodejs 项目 #

前提 `nodejs` 已经安装完成 `npm` 正常可用。  
如果没有的先去[下载安装nodejs][nodejs] 安装一路下一步就行了。

## 1. 初始化 nodejs 项目 ##

创建一个目录 `e:/projectroot`然后进去执行。

$ npm init --y

它会在当前目录下生成**项目配置信息文件**`package.json`

## 2. 安装 jquery 包 ##

`npm install` ：命令  
`jquery` ：包名

$ npm install jquery -S

## 3. 新建 `src` 目录，添加 index.html, index.js 文件 ##

**webpack 4.x** 打包默认`入口`文件 `src/index.js` 可以在 webpack.config.js 中配置  
**webpack 4.x** 打包默认`处口`文件 `dist/main.js` 可以在 webpack.config.js 中配置  
`e:/projectroot/src/index.html`：

<!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>
            <script src="../dist/main.js"></script>
        </head>
        <body>
            <ul>
                <li>这是第 1 个li</li>
                <li>这是第 2 个li</li>
                <li>这是第 3 个li</li>
                <li>这是第 4 个li</li>
                <li>这是第 5 个li</li>
                <li>这是第 6 个li</li>
                <li>这是第 7 个li</li>
                <li>这是第 8 个li</li>
                <li>这是第 9 个li</li>
                <li>这是第 10 个li</li>
            </ul>
        </body>
    </html>

`e:/projectroot/src/index.js`

import $ from 'jquery'
    
    $(function(){ 
    	$('li:odd').css('backgroundColor', 'pink');
    	$('li:even').css('backgroundColor', 'lightblue');
    });

# 安装配置 webpack #

## 1. 安装 webpack 相关包 ##

$ npm install webpack webpack-cli --save-dev

简写

$ npm i webpack webpack-cli -D

## 2. 根目录下添加 webpack 配置文件 `e:/projectroot/webpack.config.js` ##

module.exports = { 
    	mode: 'development' // 转换出来的代码不会进行压缩、混淆。默认是 production 会压缩混淆
    };

## 3. `e:/projectroot/package.json` 的 `scripts` 节点 ##

添加内容： “dev”: “webpack”。`scripts`节点下的`dev`脚本，可以通过 npm rum `dev` 执行

"scripts": { 
        。。。
        "dev": "webpack"
        。。。
      }

自动编译打包：添加`--watch` 参数\`后，编辑源文件会自动生成打包文件。

"scripts": { 
        。。。
        "dev": "webpack --mode development --watch"
        。。。
      }

如果还想修改后直接浏览新效果请看：[NodeJs学习笔记 - webpack 自动打包并访问][NodeJs_ - webpack]

## 4. 执行构建 ##

$ npm run dev

自动生成`e:/projectroot/dist/main.js` 上面的 `e:/projectroot/src/index.html` 中引用了此文件。

# index.html 页面效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

# 目录结构 #

E:/nodejsDemo
    │  package-lock.json
    │  package.json
    │  webpack.config.js
    │            
    ├─dist
    │      main.js
    │      
    ├─node_modules
    │ 	 略
    │              
    └─src
            index.html
            index.js

# 学习资料 #

*  [vue-vuejs-黑马19年8月最新版–前端-webpack-vuecli-vuex等 - 09.在项目中安装和配置webpack][vue-vuejs-_19_8_-webpack-vuecli-vuex_ - 09._webpack]
 *  [官方 npm-install 文档][npm-install]
 *  [菜鸟网络 NPM 使用介绍][NPM]
 *  [简书 npm install的几种方式区别][npm install]
 *  [NodeJs学习笔记 - webpack 自动打包并访问][NodeJs_ - webpack]
 *  [NodeJs学习笔记 - webpack 4.x 打包入口、出口文件][NodeJs_ - webpack 4.x]

[nodejs]: http://nodejs.cn/download/
[NodeJs_ - webpack]: https://blog.csdn.net/jx520/article/details/106203018
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200518215252307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[vue-vuejs-_19_8_-webpack-vuecli-vuex_ - 09._webpack]: https://www.bilibili.com/video/BV1vE411871g?p=123
[npm-install]: https://docs.npmjs.com/cli/install
[NPM]: https://www.runoob.com/nodejs/nodejs-npm.html
[npm install]: https://www.jianshu.com/p/920c1a6e999c
[NodeJs_ - webpack 4.x]: https://jerryjin.blog.csdn.net/article/details/106202871