关于webpack打包工具使用以及安装cli和各种loader的总结

最新推荐文章于 2024-04-18 11:10:37 发布

相逢太短，莫等茶凉

最新推荐文章于 2024-04-18 11:10:37 发布

阅读量294

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43849543/article/details/116024573

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.项目初始化

以下命令会在项目根路径下创建package.json和package-lack.json

npm init -y

新建js文件：main.js
在项目根目录手动创建webpack配置文件：webpack.config.js

const path = require('path')

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development'
}

2.安装webpack

注意：-d -D 命令行区分大小写！！！
在package.json里
// npm install xxxx -d 安装在"dependencies "
// npm install xxxx -D 安装在"devDependencies"

npm i webpack -D

与上等同：

npm i webpack -save-dev

用 -d 一般安装jquery 和 bootstrap之类的库

npm i jquery -d

关于webpack版本选择，建议不要选最新的版本，webpack4.x之后，需要安装webpack-cli

npm i webpack@4.39.2 -D

注意：@+版本号，如果@4则安装4里面最新latest的，安装过程发现安装提示WARN xxx requires a peer of xxx@1.1.0,如果你安装了提示的peer还是运行失败，直接卸载安装旧点的版本

例如：

npm WARN bootstrap@4.6.0 requires a peer of popper.js@^1.16.1

uninstall 可缩写 uni

npm uni bootstrap -d

install 可缩写 i

npm i bootstarp@3 -d

3.安装cli

npm i webpack-cli@3.3.6 -D

安装了webpack之后可尝试执行以下代码

webpack ./src/main.js -o ./dist/bundle.js

4.安装webpack-dev-server

使用 webpack-dev-server 这个工具，来实现自动打包编译功能

npm i webpack-dev-server -D

4.1 配置pack.json

“scripts”: {“dev”} ----图中第10行代码
在这里插入图片描述

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

–open：启动时打开浏览器的项目网页
–port ：指定端口号
–contentBase : 指定静态资源的根目录
–hot ：以打补丁的方式实现实时修改

ps:上面的配置也可以用另一种方式写在webpack.config.js中，本文不提。

注意dev可以自定义. 将dev改成server 则npm run server

npm run dev

5.安装html-webpack-plugin

使用html-webpack-plugin会根据配置webpack.config.js 自动将main.js引用到index.js中
css会发起二次请求，不推荐自己在页面中引用css
不推荐如下引用：

<link rel="stylesheet" href="./css/index.css">

普通页面引用js

<!-- 用了html-webpack-plugin不需要引用: 
        <script src="/bundle.js"></script> -->

5.1 安装

npm i html-webpack-plugin -D

5.2 配置webpack.config.js
output 资源输出配置项

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    plugins:[
        // 在内存中生成html页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，可以根据指定的页面路径生成内存中的页面
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html'   // 指定生成的页面的名称
        })
    ]
}

6.引入jquery和bootstrap

npm install jquery -d

npm install bootstrap -d

新建js文件：main.js
引入jquery 和 bootstrap

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.css'

页面index.html

<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>

注意：bootstrap里有字体文件，webpack需要配置第三方模块加载器loader

npm i url-loader file-loader -D

webpack.config.js

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    plugins:[
        // 在内存中生成html页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，可以根据指定的页面路径生成内存中的页面
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html'   // 指定生成的页面的名称
        })
    ],
    module:{ // 用于配置第三方模块加载器
        rules:[
            // 字体文件处理
            {test:/.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']}
        ]
    }
}

6.引入样式文件加载器loader

注意：webpack默认只能打包处理js类型的文件，无法处理其他非js 类型文件

如果要处理非js类型文件，需要安装第三方 loader 加载器
1.打包处理 css文件，需要安装 npm i style-loader css-loader -D
2.在webpack-config.js配置module 的第三方文件的匹配和处理规则

.css文件

npm i style-loader css-loader -D

.less文件

npm i less-loader less -D

.scss文件

npm i sass-loader node-sass -D

例如：
index.scss

html,body{
    background-color: aqua;
    .box{
        width: 220px;
        height: 120px;

        background: url('../images/tupian.jpg');
        background-size: cover;
    }
}

background: url(’…/images/tupian.jpg’);
需要url-loader加载器

limit给定的值，单位：byte,图片大小小于limit值，则不转换为base64格式，大于等于limit值则转换。
name给定图片名字，hash哈希值区分同名图片，[hash:6]截取6位，[name]原来的名字

{test:/\.(jpg|png|jpeg|gif|bmp)$/,use:['url-loader?limit=46482&name=[hash:6]-[name].[ext]']}

webpack.config.js

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    mode: 'development',
    plugins:[
        // 在内存中生成html页面的插件
        new htmlWebpackPlugin({
            // 指定模板页面，可以根据指定的页面路径生成内存中的页面
            template: path.join(__dirname,'./src/index.html'),
            filename: 'index.html'   // 指定生成的页面的名称
        })
    ],
    module:{ // 用于配置第三方模块加载器
        rules:[
            // 配置处理 .css 文件的第三方loader 规则
            //npm i style-loader css-loader -D
            {test:/\.css$/,use:['style-loader','css-loader']},
            //npm i less-loader less -D
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //npm i sass-loader node-sass -D
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //npm i url-loader file-loader -D
            // limit给定的值，单位：byte,图片大小 小于limit值，则不转换为base64格式
            // 大于等于limit值则转换。
            // name给定图片名字，hash哈希值区分同名图片，[hash:6]截取6位，[name]原来的名字
            {test:/\.(jpg|png|jpeg|gif|bmp)$/,use:['url-loader?limit=46482&name=[hash:6]-[name].[ext]']},
            //npm i boorstrap -S 安装bootstrap
            // 字体文件处理
            {test:/.(ttf|eot|svg|woff|woff2)$/,use:['url-loader']},
            // 通过Babel 将 高级语法 转换为 低级语法
            // exclude 必须排除node_modules里导入的.js文件，否则打包速度会非常慢
            {test:/.js$/,use:['babel-loader'],exclude:/node_modules/},
        ]
    }
}

还需要在main.js里导入你写好的样式表：

// 使用import 语法，导入css样式表
import './css/index.css'
import './css/index.scss'

还是在main.js
通过Babel 将高级语法转换为低级语法

// 通过Babel 将 高级语法 转换为 低级语法
// npm i babel-core babel-loader babel-plugin-transform-runtime -D
// npm i babel-preset-env babel-preset-stage-0 -D
// class 关键字，是ES6中提供的新语法，实现面向对象编程
class Preson {
    // static 关键字，定义静态属性
    static info = {name :'zs' , age : 20}
}
console.log(Preson.info)

/* function Animal(name){
    this.name = name
}
Animal.info = 123

var a1 = new Animal('小花') */

//静态属性
//console.log(Animal.info)
//实例属性
// 静态属性和实例属性挂载的对象完全不一样
//console.log(a1.name)

运行安装：

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

在项目根路径新建文件 .babelrc
内容如下：

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

webpack.config.js

module:{ 
        rules:[
        // exclude 必须排除node_modules里导入的.js文件，否则打包速度会非常慢
        {test:/.js$/,use:['babel-loader'],exclude:/node_modules/}
        ]
 }

最后附上版本信息：

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.4.1",
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "less": "^4.1.1",
    "less-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.39.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.11.2"
  }
}

可将最后dependencies和devDependencies复制到项目中去，确保完全删除node_modules的情况下，运行：

npm install

如果npm运行速度太慢推荐使用cnpm再配置淘宝镜像

相逢太短，莫等茶凉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于webpack打包工具使用以及安装cli和各种loader的总结

1.项目初始化以下命令会在项目根路径下创建package.json和package-lack.jsonnpm init -y 在项目根目录手动创建webpack配置文件：webpack.config.jsconst path = require('path')module.exports = { entry:path.join(__dirname,'./src/main.js'), output:{ path:path.join(__dirname,'./dis
复制链接

扫一扫