webpack基础使用_已禁止在项目打开时进行包还原,要在项目打开时启用还原,请更改项目属性中的npm包-CSDN博客

本文链接：https://blog.csdn.net/weixin_43949851/article/details/101155924

使用最新版的webpack@4.40

首先要有node 然后还要有npm 由于npm为国外网站,下载速度及其缓慢，这是提供了nrm

nrm提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；

运行`npm i nrm -g`全局安装`nrm`包

使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址

使用nrm use npm或nrm use taobao切换不同的镜像源地址；

确认自己的webpack版本 webpack-v

其次建立一个文件夹 webpack-study 子目录下有src和public,同时在src下建立index.html和main.js

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="../public/bundle.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>

main.js

import $ from "jquery";
$(function(){
    $('li:odd').css('backgroundColor','black');
    $('li:even').css('backgroundColor','green')
})

文件建好后,需要对项目进行初始化命令行为：`npm init -y`此时项目中会生成一个package.json的文件

初始化后安装jQuery包 `npm i jquery -S`

注意：在index.html文件中的路径问题

这时候就可以在命令中输入 ***webpack ./src/main.js -o ./public/bundle.js***就可以在浏览器中识别js的样式了

为了方便,每次输入一串的路径问题有了一个解决办法,使用webpack去处理，手动建立一个webpack的配置文件webpack.config.js

webpack.config.js

const path=require('path');
module.exports={
    entry:path.join(__dirname,'./src/main.js'),//入口文件
    output:{//配置输出选项
        path:path.join(__dirname,'./public'),//输出文件的目录
        filename:'bundle.js'//输出文件的名称
    }
}

此时只需要在命令上输入webpack即可但是由于最新版的webpack需要在本地安装webpack -CLI

安装命令：npm install --save-dev webpack-cli

为了更加的方便,当我们在页面更改代码，只需在浏览器刷新即可，提供了这样一个方法:

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行npm i webpack-dev-server --save-dev安装到开发依赖

安装完成webpack-dev-server包后我们能够在 packsge.json文件下看到，如下：

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.40.2"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  }
}

在这个文件下能够清晰的看到到我们打包好的jquery、webpack、webpack-cli、webpack-dev-server等等，在后面还会有很多

然后在命令行输入npm run dev 这时会出现报错情况,为了解决此情况,只需在package.json的script中手动添加"dev":"webpack-dev-server"即可

安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：
"dev": "webpack-dev-server --contentBase src"