webpack使用

1、webpack安装
1、项目文件初始化：npm init -y
2、安装webpack ： npm i(install) webpack -D -D开发环境
安装webpack指定版本：npm i(install) webpack@版本号
3、安装webpack-cli：npm i webpack-cli -D
安装webpack-cli指定版本：npm i(install) webpack-cli@版本号

4、安装jquery：npm i jquery -S
2、webpack基础使用
1、创建index.htm文件

2、创建index.js 导入jquery使用

最开始使用会报错
Cannot use import statement outside a module

<script src="./index.js"></script>

解决办法：打包，在package.json文件里面添加下面的命令

  "start": "webpack ./index.js -o dist/bundle"
  "命令":webpack js文件路径 -o 存储的路径(目录)

运行：npm run start
安装完成：把script的文件路径改为压缩后的js文件

方式2：
通过webpack打包命令打包
// 执行命令 output输出
// 语法 webpack 入口 --output 输出地址
webpack ./index.js -o dist/bundle
会报错：

出现这个报错，这是因为命令行执行时候会找全局的webpack，但是我们并没有安装全局的webpack，所以我们可以安装全局webpack，或者是使用脚本方式启动
报错如果不想全局安装：那就去执行第一步
执行package.json文件中添加的start命令
// 生成 dist文件夹和bundle.js文件
npm run start

3、创建配置文件webpack.config.js
/

/ 配置webpack.config.js文件
const path = require("path");
// 导出文件
module.exports={
    // 加载文件 配置入口
    entry:path.join(__dirname,'index.js'),
    // 导出文件 配置出口
    output:{
        // 导出的文件路径
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

更改package.json里面的start语法

"start": "webpack --config webpack.config.js"

删除原来的dist文件
重新运行：npm run start
mode设置
会报警告
WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/nfiguration/mode/
解决办法：在webpack.config.js文件夹添加

mode:'production'

4、安装html-webpack-plugin依赖
npm i html-webpack-plugin
安装完成后在webpack.config.js文件加载配置

删掉index.html文件里面的bundle.js引用，因为html-webpack-plugin会自动把打包出来的bundle自动加到我们的views/index.html代码里
重新运行：npm run start