webpack 创建空白新项目

课程url:

https://www.bilibili.com/video/BV1zq4y1p7gap=6&spm_id_from=pageDriver&vd_source=ff8b7f852278821525f11666b36f180a

1、创建空白项目

1、新建一个文件夹
2、运行cmd
    D: //进入d盘
    cd 路径  //cd D:\test\test002

3、运行 npm init -y
4、文件夹里 新建src文件夹
5、在test文件夹下 右键 选中以 visual studio code 软件打开文件夹，进入编辑
6、在src文件夹里，创建index.html 文件
7、在src文件夹里，创建index.js 文件
6、打开 visual studio code 软件打开index.html编辑文件，空白的，输入 ！(输入感叹号回车)，初始化

2、安装包  ES6导入包

1、cmd 安装 npm install jquery --save 简写 npm i jquery -S //package.json 中可以看到包
2、在index.js 
    import $ from jquery
3、定义jquery 入口函数
    $(function(){
        //写函数
        $().css()
    })

3、引入

在index.html中
<script src="./index.js"></script>

4、报错安装webpack

npm install webpack@5.42.1
npm install webpack-cli@4.7.2 -D // npm install webpack-cli@4.7.2 --save-dev
// 要在项目的文件夹里npm 才会出现包

注意：

-S 包在项目开发和运营时 加 -S
-D 只在开发时用的包 加 -D

在npmjs.com 官方查看

5、配置包

1、项目根目录中 创建webpack.config.js文件

module.exports = {
    mode: 'development' //mode两种模式 第一种 development开发模式，第二种 production上线模式
    
}

6、运行脚本

在package.json的scripts节点下 写dev脚本
"scripts":{"dev":"webpack"}

这样就可以在cmd 中 npm run dev 运行脚本，其中dev 可以时serve 也可以是自定义

7、运行后

1、自动生成 main.js 根据index.js自动生成dist文件夹 生成main.js文件
2、改 index.html
删掉<script src="./index.js"></script> 
写入<script src="../dist/main.js"></script>

8、修改默认配置文件,index.js main.js 可以修改名称

在webpack.config.js中
const path = require('paht')//导入node.js 操作路径的模块

module.exports = {
    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'} //输出的文件存放路径
    
  
}

9、解决 改完源代码不自动刷新 需要重新cmd

npm install webpack-dev-server@3.11.2 -D

修改 package.json 中scripts 中 dev

"dev": "webpack" 改成"dev": "webpack serve"

注意 
查看package.json 中是否有webpack-dev-server
停止cmd终端
ctrl + c

10、实时修改应该引用 内存里的main.js

//内存里的main.js在硬盘里看不到文件，但可以使用,在根目录
<script src="/main.js"></script>

注意：
如果配置 html-webpack-plugin@5.3.2 -D
可以不写 <script src="/main.js"></script> 
会自动生成

11、直接进入浏览器页面

//把src中的index.html放入根目录
npm install html-webpack-plugin@5.3.2 -D
配置文件

导入 --> 实例化 --> 使用

1、导入HTML插件 得到构造函数
const HtmlPlugin = require('html-webpack-plugin')

2、创建HTML 插件的实例对象

const htmlPlugin = new HtmlPlugin({

    template: './src/index.html', //指定源文件的存放路径 复制
    filename: './index.html', // 指定生成的文件的存放路径
}) 

module.exports = {
    
    mode: 'development' //mode两种模式 第一种 development开发模式，第二种 production上线模式
    
    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径
    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'} //输出的文件存放路径
    

    plugins: [htmlPlugin], 通过plugins节点 使htmlPlugin插件生效
}

12、自动打开浏览器 不复制链接 /修改port/指定ip

在webpack.config.js中加入

devServer:{
    open: ture
    port: 80
    host: '127.0.0.1'
}

13、CSS loader //第十四课

1、在src目录创建文件夹css
2、在css文件夹创建index.css
3、在index.js中
import './css/index.css'
//.css文件要 loader 加载器
4、安装
npm i style-loader@3.0.0 css-loader@5.2.6

5、配置文件

module.exports = {
    mode: 'development' ,//mode两种模式 第一种 development开发模式，第二种 production上线模式

    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'},  //输出的文件存放路径

    rules:[{test: /\.css$/, use:['style-loader','css.loader']}]
}

14、less

npm i less-loader@10.0.1 less@4.1.1 -D

配置文件

module.exports = {
    mode: 'development' ,//mode两种模式 第一种 development开发模式，第二种 production上线模式

    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'},  //输出的文件存放路径

    rules:[{test: /\.css$/, use:['style-loader','css.loader']}]

    rules:[{test: /\.less$/, use:['style-loader','css-loader','less-loader']}],
}

15、在index.html导入图片

//loader
npm i url-loader@4.1.1 file-loader@6.2.0 -D

//配置文件
module.exports = {
    mode: 'development' ,//mode两种模式 第一种 development开发模式，第二种 production上线模式

    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'},  //输出的文件存放路径

    #rules:

    rules:[{test: /\.css$/, use:['style-loader','css.loader']}，
            {test: /\.less$/, use:['style-loader','css-loader','less-loader',]},
            {test: /\.jpg|png|gif$/, use:['url-loader?limit=22229']},
            //limit 是限制图片base64大小
           ]}

index.html
<img> src="" alt="" class="box"<img/>


index.js
import logo from './images/logo.jpg'
$('.box').attr('src', logo)

16、打包，在硬盘上 //第22课

package.json 文件 scripts 节点上

"scripts":{
    "dev": "webpack serve"， //开发时放内存
    "build":"webpack" --mode production" //项目发布时， 运行 build命令，放硬盘
    //--mode 是修改 webpack.config.js mode的值
}

cmd
npm run build

//可以删除 dist文件夹

17、优化打包

//配置文件webpack.config.js
module.exports = {
    mode: 'development' ,//mode两种模式 第一种 development开发模式，第二种 production上线模式

    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, './dist'),filename: 'main.js'},  //输出的文件存放路径

把js文件存放在js文件夹下
__dirname, 'js/dist'
把图片放入imges
&outputPath=images


module.exports = {
    mode: 'development' ,//mode两种模式 第一种 development开发模式，第二种 production上线模式

    entry: path.join(__dirname, './src/index.js'), //打包的入口文件路径

    output:{path: path.join__(__dirname, 'js/dist'),filename: 'main.js'},  //输出的文件存放路径

    #rules:

    rules:[{test: /\.css$/, use:['style-loader','css.loader']}，
            {test: /\.less$/, use:['style-loader','css-loader','less-loader',]},
            {test: /\.jpg|png|gif$/, use:['url-loader?limit=22229&outputPath=images']},
            //limit 是限制图片base64大小
           ]}

index.html
<img> src="" alt="" class="box"<img/>


index.js
import logo from './images/logo.jpg'
$('.box').attr('src', logo)

18、打包行号和源文件行号 报错问题

第26课
//发布时 关闭，安全
webpack.config.js文件里

module.exports = {
devtool: 'eval-source-map
}