【Webpack】知识点总结

步骤：
1. 创建项目文件夹 webpackdemo
2. npm init -y 生成package.json
3. 在安装webpack,wepback-cli
在webpackdemo目录下
npm install webpack@5.73.0 webpack-cli@4.10.0 -D
4. 在webpackdemo目录下 安装jquery （生产依赖）
npm install jquery -S
5. 创建index.html (ul ,li ,引入index.js)
创建index.js （import jquery,设置背景颜色）
【验证】直接打开index.html 报错 —浏览器不支持import
6. webpack打包
npx webpack ./index.js
【验证】 多出一个dist目录->main.js
修改index.html引入 改为main.js 再次打开 正确。

        除了npx，也可以作为脚本直接运行package.json配置scripts
        "xxx":"webpack ./index.js"
        运行 使用 npm run xxx
        【验证】 多出一个dist目录-》main.js

👸
二：通过webpack.config.js进行打包
1. webpack.config.js
module.exports={ 配置入口，出口}
2. 打包命令
“build”: “webpack”
或者
npx webpack
【验证】 是否是配置的出口文件名称

   三、mode
     打包时，会有一个警告 , 需要设置时开发模式还是生产模式 
      mode: 'development'
      执行： npm run build

     四、插件 HtmlWebpackPlugin
     自动生成html文件，并自动引入输出的js
     4.1 安装插件
        npm install html-webpack-plugin@5.5.0 -D
     4.2 配置plugins
        new HtmlWebpackPlugin({
        template: path.join(__dirname, './index.html'),
        filename: 'index.html'
       })

      五、 loader配置- css配置
      webpack默认只认识js 和 json 文件。其他的不认识的。
      如果引入了css文件，打包时会报错 。"no loaders"
      解决： 
      安装
         npm install css-loader@6.7.1 style-loader@3.3.1 -D 
      配置loader
        //配置loader
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        }

    七、 配置开发服务器
      1. 安装 npm install webpack-dev-server@4.10.0 -D
      2. 配置   
           devServer: {
                //静态资源目录
                static: {
                    directory: path.join(__dirname, 'dist'),
                },
                //是否压缩
                compress: true,
                //端口号
                port: 9000,
         },
    3. 通过  webpack-dev-server   启动服务器
     "start": "webpack-dev-server  --config mywebpack.config.js"
     
     【验证】执行 npm run start ，
            浏览器中打开 [http://localhost:9000](http://localhost:9000)
            修改index.js文件内容，发现页面会自动更新，无需再npm run build了

    八、 配置html热更新
     1. index.js中引入html 
     2. 安装raw-loader
     3. 配置loader    
      {
            test: /\.(htm|html)$/,
            use: ['raw-loader']
     }  


    ⑨ 安装脚手架 （全局)  今天装好就可以了，后面不用。
    npm install -g @vue/cli

    创建vue项目
    vue create xxxx

    cd xxxx
    npm run serve
    浏览器打开  [http://localhost:8080/](http://localhost:8080/)  看到 vue 。