Webpack 安装配置及打包详细过程

Webpack

sass gulp转换成css文件
一个页面很多个js文件，维护只能加 轻易不能删
页面的优化，js/html/css文件的压缩，图片压缩

什么是webpack

打包工具 （静态资源打包工具） 前端必备
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack 的特点？

1. js依赖进行整合处理 （打包整合）
2. 一些预处理的sass，less可以在环境中进行编译 （转换）
3. 可以对js、html、图片等进行压缩 （优化）

webpack的核心？

1. entry 入口文件 // 好比main.js
2. output 出口文件 // 好比dist 打包之后的文件夹
3. plugin 插件 // 自动生成html文件等插件
4. loader 转换器 // sass less 转换成我们想要的文件类型
5. dev-serve 服务器 // 使我们webpack在本地运行 服务
6. mode 模式 // 可以切换开发环境 和 生成环境

手动搭建

安装
如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号，当然安装最新版本时可以加@版本号也可以不加@版本号

npm install webpack -g 
npm install webpack@xx -g

打包步骤

1. 在想要成为 打包文件的文件夹中，使用 npm init -y 初始化一个package.json
2. 创建一个src，src下面创建一个index.html ,里面加一个div div随便起一个 id root名字，让引入bundle.js
3. src 中创建一个 main.js 作为主要开发文件，在里面进行dom操作，操作html中的root div
4. 打包 webpack src/main.js --output src/bundle.js
5. 每次打包观看 都打包这么长就 去配置一下
6. 创建一个webpack.config.js

 const path = require("path")
   module.exports = {
       entry:"./src/main.js",
       output:{
           filename:"bundle.js",
           path:path.resolve(__dirname,"dist")
       }
   }

7. 运行webpack命令就可以进行打包

建立本地服务器
9. 建立本地服务器 cnpm i webpack-dev-server -D
10. 在package.json里 “dev”: “webpack-dev-server --open --port 8888 --contentBase src --hot”
11. npm run dev 运行
12. 解决报错 cnpm i webpack@4.35.3 webpack-cli@3.3.5 -S
13. npm run dev 就可以正常运行了

打包SCSS
14. 下载依赖 cnpm i node-sass sass-loader style-loader css-loader -D
15. 在webpack.config.js 配置 规则

module: {
    rules: [
        //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
        {
          test: /\.scss$/,
          use:['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

打包html

15. 自动生成html页面 下载依赖 cnpm i html-webpack-plugin -D
16. 在webpack.config.js 配置

const htmlWebpackPlugin = require("html-webpack-plugin")
  // 插件
  plugins:[
      new htmlWebpackPlugin({
          filename:"index.html",
          template:path.join(__dirname,'index.html')
      })
  ],

17. 配置完之后 运行即可, index.html 模板拿到和src同级

webpack.config.js 代码

const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    // 插件
    plugins: [
        new htmlWebpackPlugin({
            filename: "index.html",
            template: path.join(__dirname, 'index.html')
        })
    ],
    module: {
        rules: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及...声明的内部样式进行加载            
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}