webpack简单使用

一、webpack简介

1.webpack是什么

• webpack项目打包工具,项目构建工具

2.webpack有什么用

• 构建单页应用(disk) nmp run build
• 代码压缩
• npm i http-server -g 安装http-server 可以将文件转化成服务

3.同类工具

• 百度fis3
• grunt
• gulp

二、webpack安装

• 1.安装node(node提供了npm)
• 2.设置淘宝镜像: node js的模板(插件)存放在网站,http://www.npmjs.com
  淘宝镜像会同步该网站的模块
  设置方法：npm config set registry https://registry.npm.taobao.org
• 3.webpack官网https://webpack.github.io/
• 4.npm i webpack -g (-g全局安装，--save-dev安装到本目录)
• 5.npm i webpack-cli -g

三、nodejs模块系统

• 简单的node数据导出 module.exports

 const cat = {
            age:2,
            name:'布偶'
        }
        module.exports = cat;

• 导入 require

const aa = require('./cat.js');

四、webpack的核心概念

1.入口和出口

• webpack是一个加工代码的仓库,代码通过进口进入，加工完成后从出口出
• 命令 cls 清屏 cd 进去 cd.. 跳出
• 1.初始化package.json npm init 一直按enter
• 2.新建文件 webpack.config.js 用于配置所有的东西
• 3.打包 webpack

webpack.config.js 内
const path = require('path');

// webpack配置

module.exports={
    // 默认生产模式/压缩 development-开发模式
    mode:'development',
    // 配置入口
    entry:'./aa.js',
    // 配置出口
    output:{
        // 打包后的文件名 __dirname代表当前目录 后面的是自己定义的
        filename:'main.js',
        // 打包地址
        path: path.resolve(__dirname,'dist')
        // resolve这个方法可以兼容通用各种机型

    }
}

2.loader 加载器

• 在webpack世界里,一切皆模块
• webpack默认值只认识js模块
• 1.配置css-loader(举例)

1.安装加载器 npm i --save-dev style-loader 安装css加载器 npm i --save-dev css-loader
        2.配置 
        3.打包 webpack

• webpack.config.js 配置 loader加载器(依赖)

const path = require('path');

module.exports={
    // 配置模式是(开发模式)
    mode:'development',
    // 入口
    entry:'./main.js',

    // 出口
    output:{
        filename:'dabao.js',
        // 自定义名称
        path: path.resolve(__dirname,'dist')
        // 放在dist下
    },
    // 配置loader
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    }
}

• 其中要注意的是，因为less是基于css的插件，因此安装less依赖要生效必须得安装css依赖

3.plugins 插件

• 增加额外的功能
• html插件，html-webpack-plugin
• 安装

npm i html-webpack-plugin -g
npm i html-webpack-pligin --save-dev

• 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    mode:'development',
    entry:'./main.js',
    output:{
        filename:'index.js',
        path: path.resolve(__dirname,'dist')
    },

    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },

    plugins:[
        new HtmlWebpackPlugin({template:'./dist/index.html'})
    ]
}

• Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方案
  npm link webpack --save-dev
  webpack.DefinePlugin 配置全局变量

4.dev-server

• 安装 npm i webpack-dev-server -g
• 配置htmlWebpackPlugin(上面有)
• 配置devServer

const path=require('path');

module.exports={
    entry:'./main.js',
    output:{
        filename:'index.js',
        path: path.resolve(__dirname,'dist')
    },
    module:[

    ],
    plugins:[

    ]
    ,
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        compress:true,
        port:9000
    }
}

• 运行命令 webpack-dev-server

5.devtool配置

• 作用：选择一种调试代码的方式

• 配置

  
  image.png
• 这里选择的是eval模式
• 还有source-map
• eval-source-map
• cheap-source-map
  详细可以点击这里了解https://www.webpackjs.com/concepts/

小总结

• 1.npm i webpack -g、npm i webpack-cli -g会生成一个文件夹
• 2.node_modules里是存放我们配置的所有依赖和插件的地方
• 3.package.json 里记录着我们所配置的消息
  模板删完后，npm i 可以全部下载回来 就是通过这个文件的记录下载的
• 4.package-lock.json这个文件不能动
• 5.我们自己创建的webpack.config.js里是配置所有东西的地方