webpack的基本使用过程以及命令

一、webpack的基本使用过程

1.安装webpack

npm install webpack@3.6.0 -g

2.查看是否安装完成,检测版本

webpack -v

3.打包的过程 (两个路径中间有空格)

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

4.如果因为webpack的版本过高,可以使用如下的方式

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

5.如果是webpack5的版本的使用如下的方式 (设置为生产模式下)

webpack --entry ./src/main.js -o ./dist/bundle.js --modle=development

6.正常显示的截图展示:

在这里插入图片描述
7.在使用是需要用到绝对位置

需要初始化:

npm init

webpack.config.js:

const path = require('path') //node中自带的属性,可以获取到绝对路径
module.exports = {
entry:'./src/main.js', //入口地址
output:{
  path:path.resolve(__dirname,'dist'), //路径  需要动态获取路径
  filename:'bundle.js' //文件名
}//出口地址
}

在命令行执行:

webpack

在这里插入图片描述

8.在package.json:

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "echo test file!!" 
  },
  "author": "",
  "license": "ISC"
}

执行如下,会启动scripts中的命令,并且显示后面的操作:

在这里插入代码片

在这里插入图片描述
在这里插入图片描述
9.打包命令

npm run webpack 

在package.json中添加如图的自定义,可使用

npm run build

在这里插入图片描述

10.本地安装webpack(生产环境):

npm install webpack@3.6.0 --save-dev

自动加载完成:
在这里插入图片描述

二、对于webpack无法将css,.jsx,.vue文件转换成js文件,需要安装loader

1.通过npm安装loader

npm install --save-dev css-loader@2.0.2

安装过程报错:查看npm 的版本 ,如果npm的版本大于7,则需要降低版本,降为6.x版本
降低npm的版本:

npm install -g npm@6

再执行安装loader的命令(webpack的版本为3.6.0则loader的版本为2.0.2)版本要对应,如果安装的webpack的版本超过4.x则安装对应的版本

npm install --save-dev css-loader@2.0.2

2.在webpack.config.js中的module关键字下进行配置

//配置css的路径
module: {
  rules: [
    { test: /\.css$/, use: 'css-loader' },
  ]
}

在命令行进行打包处理:

 npm run build

在这里插入图片描述

现在是css-loader是加载,不解析,需要安装style-loader

npm install --save-dev style-loader@0.23.1

在这里插入图片描述
再重新打包:

npm run build

在这里插入图片描述
安装less-loader与less的包注意对应的版本:

npm install --save-dev less@3.9.0 less-loader@4.1.0

在这里插入图片描述
webpack.config.js:

const path = require('path')


module.exports = {
entry:'./src/main.js', //入口地址
output:{
  path:path.resolve(__dirname,'dist'), //路径  需要动态获取路径
  filename:'bundle.js' //文件名
},//出口地址

//配置css的路径
module: {
  rules: [
    { test: /\.css$/, 
    use: ['style-loader','css-loader'] 
  }, //只负责加载,不负责解析
  {
    test:/\.less$/,
    use:[{
      loader:"style-loader" //创建
    },
    {loader:"css-loader" //翻译
  },
  {
    loader:"less-loader" //less转css
  }]
  }
  ]
}
}

引入背景图的时候在css中使用**background-image:url(‘’)**需要引入url-loader

npm install --save-dev url-loader@1.1.2
{
    test:/\.(png|jpg|gif|jpeg)$/,
    use:[{
       loader:"url-loader",
       options:{
         limit:81920
       }
    }]
  }

安装file-loader:

npm install file-loader@3.0.1 --save-dev

在这里插入图片描述
配置引用图片的路径:

 publicPath:'dist/',

在这里插入图片描述
获取原始的命名,并根据自己的需求修改:
在这里插入图片描述

webpack-ES6转ES-5的bable

cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

.vue文件封装处理

npm install vue-loader vue-template-compiler --save-dev
npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
npm install  vue-template-compiler@2.6.11 --save-dev
import Cpn from './Cpn'

webpack.config.js:

resolve:{
  // alias 别名
  alias:{
     'vue$':'vue/dist/vue.esm.js',
    //  'vue$':'./node_modules/vue/dist/vue.js'
  },
  extensions: ['.css','.less','.js','.json','.vue']
}

webpack-横幅Plugin的使用

const webpack = require('webpack')

plugins:[
  new webpack.BannerPlugin('最终版权归ZC所有')
]

为使得在dist中打包生成html

打包html的plugin

npm install html-webpack-plugin@3.2.0 --save-dev

在这里插入图片描述

打包获取index.html中的信息,自动配置

plugins:[
  new webpack.BannerPlugin('最终版权归ZC所有'),
  new HtmlWebpackPlugin({
    template:'index.html'
  })
]

js压缩的Plugin(webpack-UglifyjsWebpackPlufin)

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

在webpack.config.js中:

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin')

plugins中添加:

new UglifyJsWebpackPlugin()

在这里插入图片描述

webpack-dev-server搭建本地服务器

npm  install --save-dev webpack-dev-server@2.9.1
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骨子里的偏爱

上传不易,还请多多支持。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值