[JavaScript知识库]webpack的基础用法

1.关于webpack

webpack:对项目里面的资源进行打包，不仅对模块化写法的代码可以进行大宝，对图片，css，js，json，less，html等资源打包成静态资源，但必须是配合各种loader进行打包，并且也可以把资源之间依赖关系一同打包在内，webpack还可以搭建本地服务器，设置热更，也可以设置代理服务器。1安装webpack webpack-cli -g,2在单独使用时可以把webpack webpack-cli -s 装到本地项目.webpack:webpack 提供核心功能.webpack-cli 快速搭建webpack的工具。webpack-dev-server 搭建本地服务的工具。

2.使用步骤

1 全局安装 webpack webpack-cli -g

cnpm install webpack webpack-cli -g

2 初始化node项目 npm init -y

3 cnpm install webpack webpack-cli -s ?安装到本地项目里面

4 创建静态文件夹，要打包的资源,创建webpack.config.js文件

5 设置webpack.config.js 中entry 、output、mode这些配置

6 创建src下index.js作为入口打包文件，创建f1.js，并且引入f1.js

7 npm run build 执行打包，必须先在package.json进行 ? "build":"webpack"

8 npm run watch ?执行实时监听，必须先在package.json进行 "watch": "webpack --watch"

3.webpack.config.js的配置

var path = require("path") 
// 添加打包的一些配置
module.exports = {
    // 打包的入口配置
    entry: {
        index:'./src/index.js' //需要打包的文件的路径
    },
    // 打包之后存放位置
    output: {
      filename:'[name]-bundle.js',  //打包之后的名字
      path:path.resolve(__dirname,"dist") //打包之后的文件路径
    },
    mode:"development", //设置环境为开发环境下
    module:{
        // 添加各种loader
        rules:[ //添加每种loader的配置，针对不同资源添加loader
            {
                // 解析css的loader
                test:/\.css/i,  //匹配后缀名为css的资源
                use:["style-loader","css-loader"],  //使用loader解析css文件
                exclude:/node_modules/, //不从node_modules匹配
            },
            {
                //解析资源文件的打包配置，字体 图标等资源 可以采用file-load,把资源转换成资源路径 
                test:/\.(woff|woff2|ttf|otf|eot)$/i,
                type:"asset/resource"
            },
            {
                test:/\.(png|jpg|jpeg|gif|svg)$/i,
                use:["url-loader"]
            },
            {
                test:/\.xml$/i,
                use:["xml-loader"]
            }

        ]
    }

  };

4.index.js

import  {f1} from "./f1.js" //es6模块导入写法
f1()

import './1.css'

import data from './data.json'
console.log(data);

import pic from './stm.jpg'
console.log(pic);
var img = document.createElement("img")
img.style.width = '300px'
img.style.height = '500px'
img.src = pic
document.body.appendChild(img)

var button = document.createElement("button")
button.innerText = "点击"
button.onclick = f1
document.body.appendChild(button)


import datXML from "./dat.xml"
console.log(datXML);