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