基本使用

环境搭建

控制台输入 npm init -y，会自动创建一个json配置文件

创建网页模板index.html

导入jquery:npm i jquery -S

创建index.js文件

但此时页面无法达到预期效果：

配置webpack

注：

development 时，为开发模式，转换后的代码不会进行压缩与混淆，转化速度快 production 时，会转换后的代码进行压缩与混淆，转化时间久

控制台输入：npm i webpack-cli -D

创建webpack.config.js，配置内容如下：

module.exports = {
    // 编译模式 development production
    mode:'development'  
}

在package.json文件中，新增如下配置：

"dev": "webpack --mode development",  
"build": "webpack --mode production"

并在控制台输入npm run dev

修改index.html中js文件引用

配置打包的入口与出口

在webpack.config.js添加如下代码，之后在控制台输入npm run dev打包

const path = require('path')

module.exports = {
    // 编译模式
    mode:'development', // development production
    // 指定入口路径
    entry: path.join(__dirname,'./src/index.js'),//__dirname表示当前文件所处的目录
    // 
    output:{
        path:path.join(__dirname,'./dist'),//指定输出文件路径
        filename:'bundle.js' // 输出文件名称 
    }
}