【配置】webpack简单配置

目录

1. webpack是什么,有哪些同类工具
   (1) webpack项目打包工具,项目构建工具,有什么作用

   • 构建单页应用(disk) npm i http-server -g
   • 代码压缩
   • ......
     (2) 同类工具
   • 百度fis3
   • grunt
   • gulp

2. webpack安装

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

3. nodejs模块系统

   • 导出
     // m1.js
     const cat = {
     age: 2,
     name: '布偶'
     }
     module.exports = cat;
   • 导入
     const aa = require('./cat.js');
     console.log(aa.name);

webpack的核心概念

1. 入口和出口
   • 初始化package.json
   • 新建webpack.config.js文件
   • 打包 webpack
2. loader 加载器
   • 在webpak世界里,一切皆模块
   • webpack默认只认识js模块
   • 配置css-loader
     • npm i --save-dev css-loader style-loader
     • 配置
     • 打包
   • 配置less-loader
3. plugins 插件
   • html插件 html-webpack-plugin
     • 安装
     • 配置
     • 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
   • 运行命令 webpack-dev-server
5. devtool配置

代码实现

1.首先在你创建的文件夹中（文件夹名不可为webpack 否则报错），初始化项目 使用命令npm init ，创建package.json

2.手动创建 webpack.config.js配置相关配置

手动创建

main.js

console.log('这是打包的JS')

webpack.config.js文件

//导入nodejs自带的path
const path = require('path');
//导入所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//导出
module.exports = {
    //不写默认模式为生产模式production   可以修改成development开发模式
    mode: 'development',
    //入口
    entry: './main.js',
    //出口
    output: {
        //导出的路径   兼容windows和苹果
        path: path.resolve(__dirname, 'dist'),
        //打包后的文件名
        filename: './main.js'
    },
    //配置loader
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    //插件配置
    plugins: [new HtmlWebpackPlugin()]
}

装插件

插件

装加载器loader

加载器loader

3.使用打包命令webpack

这时你可能会出现问题报错
Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
解决方案 npm link webpack --save-dev

webpack打包

此时打包成功，出现了我们所配置的东西

打包

插件html-webpack-plugin自动配置js文件生效

index.html

10.PNG

vue-cli中已为我们配置好webpack配置

从vue ui中进行查看

vue打包的入口.PNG

webpack配置vuecli1.PNG

webpack配置vuecli2.PNG