《Webpack》_基本使用

Webpack_基本使用

【1】、自己定义的项目【不使用Vue-cli】的基本文件包含：src【css,js,images,index.js,main.js】，dist文件夹

创好文件之后使用 npm init -y 初始化项目。-> 会生成一个package.json文件

【2】、webpack 可处理的事情

1、能够处理js文件的相互依赖关系，在main.js里面引入jquery或者别的js模块

可以使用import $ from 'jquery' ES6语法

2、Webpack能够处理js的兼容性问题，可以把高级的低及的js语法转为浏览器可识别的语法。

3、打包命令格式：webpack 要打包的文件路径 打包好输出文件的存储路径。

webpack .\src\man.js .\dist\bundle.js

【3】、根路径下添加webpack.config.js配置文件，webpack直接回车后进行文件压缩，不用指定入口文件与输出文件。

// webpack.config.js基本配置文件
const path = require('path')

module.exports = {
    entry: path.join(__dirname,  './src/main.js'),    // 入口，webpack打包的文件
    output: {
        path: path.join(__dirname, './dist'),    // 指定打包好的文件输出到某个目录下
        filename: 'bundle.js'    // 指定打包文件的名字
    }
}

 

---

Webpack_plugin配置和使用

【4】、package.json文件 添加webpack-dev-server 工具就是npm run dev 时实现自动编译的配置包

注意：本地安装webpack-dev-server之前需要先本地安装webpack

npm i webpack -d 

npm i webpack-dev-server -d

// package.json 文件配置dev
"scripts": {
    "dev": "webpack-dev-server"
}

自动编译的bundle.js文件被托管在根目录路径下，而不是dist文件夹下。但是这个文件不会存在本地磁盘的根路径下，而是存在内存里面。所以index.html文件下引入的bundle.js文件需要改为根路径下的bundle.js文件。

【5】、webpack配置修改

1、package.json 文件修改端口，根路径，配置热更新[不需要刷新浏览器]等配置

"scripts": {
    "dev": "webpack-dev-server --open --port 3000 --contenBase src --hot"
}
// --port 3000 : 修改3000为默认端口号
// --contenBase src : 修改src为默认路劲
// --hot : 实现热更新