webpack基本配置、模块、插件

2020-02-17 本文已影响0人苹果咏

1、项目初始化，安装依赖

npm init -y
npm install

-y是所有默认都选yes

webpack4两个包要分别安装

npm install webpack  --g
npm install webpack-cli  --g

webpack4打包方法

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

2、用webpack命令直接打包

先新建webpack.config.js文件，配置好出入口目录就可以

module.exports = {
    //入口路径
    entry: path.join(__dirname, './src/main.js'),  //打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),  //输出目录
        filename: 'bundle.js'
    }
}

3、全自动编译，安装webpack-dev-server

npm i webpack-dev-server -D

因为安装在本地，所以无法直接运行webpack-dev-server，要在package.json中加入

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

这样运行npm run dev就能直接运行webpack-dev-server，open是自动打开浏览器，port设置端口号，contentBase设置src为根目录，hot局部刷新，不刷新整个JS文件，不刷新加载页面
这个生成的js没有存在磁盘上，所以引用的js要写成根目录
--open 自动打开浏览器
--port 3000 指定端口3000
--contentBase src 内容的根路径
--hot 热重载，热更新。打补丁，实现浏览器的无刷新

要将缓存存在硬盘上，要安装

npm i html-webpack-plugin -D

webpack.config.js

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

// webpack配置文件
module.exports = {
    //入口路径
    entry: path.join(__dirname, './src/main.js'),  //打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),  //输出目录
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({   //创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html'
        })
    ]
}

这样主页不用写引用js的路径，插件已经自动引用

4、加载CSS文件

安装

npm i style-loader css-loader -D

webpack.config.js的配置文件中追加

module: {  //用于配置所有第三方模块加载器
        rules: [
            { test: /\.css$/, use:['style-loader', 'css-loader'] }  //匹配.css结尾的文件,使用这两个插件处理，先调用右边的loader
        ]
    }

再在main.js中引用css

import './css/index.css'

5、文件处理规则

webpack看到js中的文件处理不了，就会去webpack.config.js找配置规则，先调用右边的

6、处理less和scss文件

安装

npm i less -D
npm i less-loader -D
npm i sass -D
npm i sass-loader -D

webpack.config.js的配置文件中追加

module: {  //用于配置所有第三方模块加载器
        rules: [
            { test: /\.css$/, use:['style-loader', 'css-loader'] },  //匹配.css结尾的文件,使用这两个插件处理
            { test: /\.less$/, use:['style-loader', 'css-loader','less-loader'] },
            { test: /\.scss$/, use:['style-loader', 'css-loader','sass-loader'] }
        ]
    }

7、处理图片路径的loader

npm i url-loader file-loader -D

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' }// 处理图片路径的loader，小于7632字节的进行base64编码，name保留原文件名，加入哈希值防止命名重复

引入bootstrap图标无法显示问题
https://www.cnblogs.com/ZaraNet/p/10255965.html

8、处理Vue文件

npm i vue -S
npm i vue-loader vue-template-compiler -D

main.js

import login from "./login.vue"