webpack的基本使用

hline 2020-02-21

1.创建一个项目目录,最好不要带中文

2.初始化本地包的介绍文件

npm init -y

3.全局安装webpack和webpack-cli,同时在项目本地安装webpack和webpack-cli

npm install webpack -g
npm install webpack-cli -g
npm install webpack --save-dev (等同于命令npm install webpack -D)向开发环境添加依赖
npm install webpack-cli -D

4.webpack的作用

假设下面是main.js文件,并且被我们的html文件引用

import $ from 'jquery' 
$(function () {
    $('li:odd').css('backgroundColor','red');
    $('li:even').css('backgroundColor','blue');
})
<script src='./main.js'></script>

此时,浏览器会报错,因为浏览器识别不了这种语法,而引入webpack就可以解决这个问题
先后台执行命令生成打包文件

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

再由html文件引入这个打包文件

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

得出结论:webpack可以做两件事情
1.处理JS文件的互相依赖关系;
2.处理JS的兼容问题,把高级的、浏览器不识别的语法,转为低级的,浏览器能正常识别的语法

5.配置入口文件和出口文件

在项目根目录下新增一个webpack.config.js文件,在文件中配置出口和入口,配置完,后台直接wenpack就可以生成打包文件了

const path = require('path')


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

6.自动编译工具

  • 下载自动编译工具 webpack-dev-server npm i webpack-dev-server -D
  • package.json文件中配置scripts 设置webpack-dev-server的执行命令
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  • npm run dev 执行
  • 命令执行完以后,webpack-dev-server在node中开启了一个服务器,服务器的地址是 http://localhost:8080(协议+域名+端口号),同时,打包生成的bundle.js文件在这个服务器的根目 录下,但是这个文件在根目录下找不到,虽然它与src平级,其实它是以虚拟的形式托管在内存中,其目的是为了方便频繁的打包,加快速度,所以放在内存中
  • 此时因为项目已经托管到了服务器中,bundle.js的引用路径是
  • index.html的访问路径是http://localhost:8080/src/index.html

7.自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载(只是修改补丁,不重新生成整个bundle.js文件)

有两种方法:

  • 1.在package.json中配置命令,并重启服务器:
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  • 2.在webpack.config.js配置文件中配置devServer对象
const path = require('path')


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    // 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
    devServer: {
        open: true,
        port: 4000,
        contentBase: 'src',
        hot: true
    },
}

8.安装html-webpack-plugin插件

先下载

npm i html-webpack-plugin -D

html-webpack-plugin插件的两个作用

  • 自动在内存中根据指定页面生成一个内存中的页面
  • 自动把打包好的 bundle.js 追加到页面中去

在webpack.config.js配置文件中配置插件

const htmlWebpakPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    // 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
    devServer: {
        open: true,
        port: 4000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        new htmlWebpakPlugin({
                template: path.resolve(__dirname, 'src/index.html'),//模板路径
                filename: 'index.html'//自动生成的HTML文件的名称
            })
    ],
}

9.处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下,webpack处理不了这些样式文件

处理CSS文件

  • 1.下载插件
npm i style-loader css-loader --save-dev
  • 2.导入css文件
import './css/index.css'
  • 3.webpack.config.js中配置module对象
const path = require('path')
const htmlWebpakPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    // 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
    devServer: {
        open: true,
        port: 4000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        new htmlWebpakPlugin({
                template: path.resolve(__dirname, 'src/index.html'),//模板路径
                filename: 'index.html'//自动生成的HTML文件的名称
            })
    ],
    module: {
        rules: [
            {test: /\.less$/,use: ['style-loader','css-loader','less-loader']}, //处理less文件的规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则,
        ]
    }
}

处理less文件

  • 1.下在loader
npm install --save-dev less-loader less
  • 2.导入文件
import './css/index.less'
  • 3.webpack.config.js中配置module对象
const path = require('path')
const htmlWebpakPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    // 这个配置完以后,后台直接webpack就可以按照配置的输入和输出的目录打包文件了
    devServer: {
        open: true,
        port: 4000,
        contentBase: 'src',
        hot: true
    },
    plugins: [
        new htmlWebpakPlugin({
                template: path.resolve(__dirname, 'src/index.html'),//模板路径
                filename: 'index.html'//自动生成的HTML文件的名称
            })
    ],
    module: {
        rules: [
            {test: /\.less$/,use: ['style-loader','css-loader','less-loader']},
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则,
        ]
    }
}

10.使用Vue

首先介绍导包的规则

  • 找node_modules文件夹
  • 在node_modules中根据包名,找vue 文件夹
  • 在vue文件夹中,找package.json配置文件
  • 在package.json配置文件中,查找main属性,(这个main属性指定了包被加载的时候的入口文件) 

  • 1.本地下载Vue npm i vue -D
  • 2.正确的导包,有两种方法
import Vue from '../node_modules/vue/dist/vue.js'  (main属性所指向的文件功能不全,这个才是完整的文件)
import Vue from 'vue',再配置webpack.config.js文件
      resolve: {
        alias: {
         "vue$": "vue/dist/vue.js"
        }
       }
  • 3.使用.vue组件模板文件定义组件
1.安装loader npm i vue-loader vue-template-compiler -D
2.定义一个.vue结尾的组件文件,组件有三部分组成,template script style (style并且加scoped属性 使样式只作用与当前组件)
3.使用import login from './login.vue'导入组件
4.修改webpack.config.js配置文件
  - module加一条匹配规则  {test: /\.vue$/,use: 'vue-loader'}
  - plugin加一个对象
        const VueLoaderPlugin = require('vue-loader/lib/plugin');
        new VueLoaderPlugin()

11.在webpack中使用vue-router

1.下载vue-router   npm i vue-router -D
2.导包
 import Vue from 'vue';
 import VueRouter from 'vue-router'
3.手动安装VueRouter
 Vue.use(VueRouter)

12.webpack处理ES6语法

借助第三方loader处理高级语法,loader将高级语法转换为低级语法后,结果交给webpack打包到bundle.js
通过Babel,可以将高级语法转换为低级语法,使用方式如下

1.下载包
npm install babel-loader babel-core babel-preset-env -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -D
npm i @babel/^7.0.0 -D
npm i @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties   @babel/plugin-transform-runtime -D
2.打开webpack的配置文件,再module节点下的rules数组中,添加一个新的匹配规则
  {test: /\.js$/,use: 'babel-loader',exclude: /node-modules/}    exclude配置是为了排除对modules中JS文件的转化
3.在项目的根目录中,新建一个叫做.babelrc的babel配置文件,这个文件是JSON格式,所以,在书写的时候,必须符合JSON规则,不能写注释,字符串必须用双引号
4.在.babelrc文件中写如下的配置:preset可以翻译成语法
  {
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
  }

相关推荐