webpack的基本使用

Posted 2021-03-08 zerodoctor

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/core@^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"]
　　}