webpack:从零开始的webpack世界

最新推荐文章于 2024-07-26 18:04:49 发布

Var521

最新推荐文章于 2024-07-26 18:04:49 发布

阅读量181

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/Var521/article/details/105094604

版权

新建项目空白目录 “day05”初始化包管理配置文件npm init -y新建src目录，创建index.html,index.js 实现隔行变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...

摘要由CSDN通过智能技术生成

新建项目空白目录 “day05”
初始化包管理配置文件

npm init -y

新建src目录，创建index.html,index.js 实现隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色</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>

   </ul> 
</body>
</html>

index.js

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

在这里插入图片描述
这里无法实现隔行变色，原因是import那句代码是ES6的模块化语法，浏览器对这种语法支持的不是很好，所以浏览器无法识别，因此需要使用webpack将有兼容性的代码转化为没有兼容性的代码

安装webpack相关的包

npm install webpack webpack-cli -D

在项目根目录中，创建名为webpack.config.js的webpack配置文件

module.exports = {
    mode:'development' //mode  用来指定构建模式
}

注：
mode一共有两种构建模式，分别为development和production，二者之间的区别为：
development是开发者模式，此模式表示转换出来的代码不会出现压缩和混淆，处理速度较快
production是产品发布模式，此模式下会对代码进行压缩和混淆，转换时间较长
产品上显示使用production,开发时选择development

在package.json 配置文件中的 script 节点下，新增dev脚本

"scripts": {
    "dev":"webpack"  
  },

启动webpack 进行项目打包

npm run dev

会出现如下目录“dist”
在这里插入图片描述

8.修改index.html,将index.js改成dist里面的main.js,这个已经是转换后的，不存在兼容性

<script src="../dist/main.js"></script>

ok啦，撒花撒花

2、配置打包的入口和出口

webpack4.0中默认规定：
打包的入口文件为 src->index.js
打包的输出文件为 diet->main.js

如果需要修改入口和出口，可以在 webpack.config.js中新增如下配置信息：

const path = require('path') //指定绝对路径可以使用path模块处理路径
module.exports = {
    mode:'development', //mode  用来指定构建模式
    entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'),//输出文件的存放路径
        filename:'bundle.js'//输出文件的名称
    }
}

完成标志：
在这里插入图片描述
在index.html中修改

<script src="../dist/bundle.js"></script>

就ok啦

3.配置自动打包的功能

安装支持项目自动打包的工具

npm install webpack-dev-server -D

修改package.json->scripts

  "scripts": {
    "dev": "webpack-dev-server"
  },

修改index.html中，script

<script src="/bundle.js"></script>

注：
webpack-dev-server 打包生成的输出文件bundle.js储存在内存中，默认放在了项目根目录中且是虚拟的文件。

运行，重新打包

npm run dev

在这里插入图片描述
5. webpack-dev-server 会启动一个实时打包的HTTP服务器，因此看图片知道在浏览器中访问http://127.0.0.1:8081，就可以查看自动打包效果

3.配置html-webpack-plugin生成预览页面

安装生成预览页面插件

npm install html-webpack-plugin -D

修改webpack.config.js的配置信息

const HtmlWebpackPlugin = require('html-webpack-plugin')//引入生成预览页面插件
const htmlPlugin = new HtmlWebpackPlugin({//创建插件实例对象
    template:'./src/index.html',//指定要用到的模板文件
    filename:'index.html'//指定生成文件的名称，该文件存在内存中，在目录中不显示

修改webpack.config.js文件中向外暴露的配置对象

module.exports = {
    plugins:[htmlPlugin]
}

4.配置自动打包的相关参数

在webpack.json中修改script节点：

"dev": "webpack-dev-server --open "

5.通过loader打包非js模块

webpack默认只能打包以.js结尾的模块，如果想要打包非js文件模块，需要调用loader加载器才可以正常打包

1.打包处理css文件

安装处理css文件的loader加载器

npm i style-loader css-loader -D

新建css文件，引入到html文件中
修改webpack.config.js,新增module节点

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

注：
use数组中loader的位置是固定的，且调用顺序是从后往前

2.打包处理less文件

1.npm i less-loader less -D
2. 修改webpack.config.js

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

3.运行npm run dev

3.打包处理sass文件
1.npm install sass-loader node-sass -D
2. 修改webpack.config.js

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

    }

3.新建sass文件，将sass文件导入到index.js

import "./css/1.scss"

在这里插入图片描述
4.运行程序 npm run dev

6.打包处理js文件中高级语法

1.安装babel转换器相关的包：

 npm install sass-loader node-sass -D

2.安装babel语法插件相关的包：

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3.在根目录创建babel.config.js

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

4.在webpack.config.js配置

   module:{
        rules:[
            { test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
    ]

    }

7.配置vue组件加载器

1.下载vue-loader包

npm i vue-loader vue-template-compiler -D

2.在webpack.config.js添加vue-loader配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins:[htmlPlugin,new VueLoaderPlugin()],
    module:{
        rules:[
            { test:/\.vue$/,loader:'vue-loader'},
        ]
    }

Var521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack:从零开始的webpack世界

新建项目空白目录 “day05”初始化包管理配置文件npm init -y新建src目录，创建index.html,index.js 实现隔行变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor...
复制链接

扫一扫