webpack的使用(未用脚手架)

一、什么是webpack?为什么使用它?

webpack本质是一个第三方模块包,可以用来分析和打包代码。

为什么使用，是因为可以提高浏览器的打开速度，可以压缩代码。

二、webpack的安装使用

1、安装

初始化：yarn init

安装指令：yarn add webpack webpack-cli -D

然后在配置：在package。json里配置scripts:{"build": "webpack"}

2、用webpack打包

创建src文件夹下创建cc文件夹创建cc.js，写入export const addFn = (a, b) => a + b。新建src文件夹下index.js导入使用import {addFn} from './cc/cc'

console.log(addFn(10, 20));

运行打包命令：yarn build（也可以是npm run build）

三、其他配置指令

1：入口和出口

新建src并创建webpack.config.js

填入配置项

const path = require("path")

module.exports = {
    entry: "./src/main.js", // 入口处
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
}

2：使用jquery

下载jquery，新建public/index.html

指令：yarn add jquery

然后在src/main.js引入jquery

import $ from 'jquery'

3:插件自动生成html文件

下载插件 yarn add html-webpack-plugin  -D

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({template: './public/index.html'})
    ]
}

4：css安装依赖包

yarn add style-loader css-loader -D

配置：

module.exports = {
    module: { 
        rules: [ // loader的规则
          {
            test: /\.css$/, // 匹配所有的css文件
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

引入 import "./"

5:webpack开发服务器

下载包：yarn add webpack-dev-server -D

配置自定义命令：scripts: {"build": "webpack", "serve": "webpack serve"}

运行命令：yarn serve