zoukankan      html  css  js  c++  java
  • webpack打包工具

    一、webpack基本使用
    1.新建空白文件(目录)文件名不能是webpack,运行 npm init -y (路径中不能有中文),初始化package.json文件
    2.创建src源代码目录
    3.在src下创建index.html
    4.初始化首页基本的结构
    5.下载页面需要的依赖包

    二、在项目中安装和配置webpack
    1.运行 npm install webpack webpack-cli –D ,安装webpack相关工具
    2.在项目根目录创建webpack.config.js文件,配置文件
    3.在webpack文件中添加
    module.exports = {
    mode: 'development' // mode 用来指定构建模式
    }
    4.在package.json中
    "scripts":{//添加
    "dev":"webpack"
    }
    5.在终端中运行 npm run dev 启动webpack进行项目打包

    三、打包的入口和出口
    1.webpack 默认
    入口文件:src:index.js
    出口文件:dist:main.js

    2.需要修改默认文件时 在module.exports中添加
    entry: path.join(__dirname, './src/index.js'),//打包入口路径
    output: {
    path: path.join(__dirname, './dist'),//出口路径
    filename: 'bundle.js'//出口文件名称
    }

    四、webpack 自动打包功能
    1.运行npm i webpack-dev-server -D命令 安装自动打包工具
    2.修改package.json 的dev:"webpack-dev-server"
    3.修改html页面的引用script脚本的路径 src="/bundle.js"
    4.运行npm run dev进行重新打包
    5.在浏览器中访问http://localhost:8080

    在浏览器中预览页面

    配置自动打包相关参数 (打包过后,会自动按照下面方式打开)
    --open 默认浏览器
    --host 127.0.0.1
    --port 端口

    修改配置文件都需要重新打包一次

  • 相关阅读:
    Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
    移动端前端题
    前端面试题,不解释...
    HTMLFormElement获取表单里面所有的值然后以json形式返回
    关于 CommonJS AMD CMD UMD 规范的差异总结
    mysql库安装
    安装mysql到ubuntu
    一个致命的操作
    vim编辑器常规配置
    samba的安装与配置
  • 原文地址:https://www.cnblogs.com/yangxiaobai123/p/11351237.html
Copyright © 2011-2022 走看看