安装

本地安装

npm install --save-dev webpack
npm install --save-dev webpack-cli   //4.x以上版本,用于cli命令

全局安装

npm install -g webpack
npm install -g webpack-cli

初始化项目

npm init -y  //自动生成一个package.json文件
npm install webpack webpack-cli --save-dev

基本目录结构

webpack配置表

按项目结构编写代码

//package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

//webpack.config.js

const path = require('path');

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

//index.html

<!doctype html>
<html>
  <head>
    <title>demo</title>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

//index.js

function component() {

    var element = document.createElement('div');
    var node = document.createTextNode("hello,webpack!");
    element.appendChild(node);
    return element;
}
document.body.appendChild(component());

下载安装包

//production模式
npm install --save [+安装包名称]

//development模式
npm install --save-dev

运行项目

以项目脚本为入口起点,输出main.js

npx webpack

添加npm脚本到package.json设置一个快捷方式运行本地的webpack

//package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"  //新增
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

loader

加载css文件

react默认不支持css文件,所以需要进行转码.
// webpack.config.js

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

加载图片

    module: {
      rules: [
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
    ]
   }

加载字体

    module: {
      rules: [

       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }

加载数据

    module: {
      rules: [
       {
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader'
         ]
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader'
         ]
       }
      ]
    }

全局资源

通过这些方式加载资源,更加直观和可移植

插件的使用

比如使用一个HtmlWebpackPlugin

安装
npm install --save-dev html-webpack-plugin
使用
const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    entry: './src/index.js',

+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],

    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

source map

准确追踪错误和警告

// webpack.config.js

    const path = require('path');

    module.exports = {
      entry: './src/index.js',
+     devtool: 'source-map',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

开发工具

帮助你在代码发生变化后自动编译代码

有webpack's Watch Mode,webpack-dev-server,webpack-dev-middleware 三种.开发常用webpack-dev-server

安装

npm install --save-dev webpack-dev-server

使用

//webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
+   devServer: {
+     contentBase: './dist'
+   },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

webpack基本使用教程的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. webpack 的使用教程

    webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...

  3. webpack快速掌握教程

    转载http://yijiebuyi.com/blog/46fb97b11fb8f4055e0b04d1cecb1f69.html #为什么用webpack 如果我们 前端 javascript 能像 ...

  4. Webpack新手入门教程(学习笔记)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } ...

  5. Webpack简易入门教程

    <!-- 其实网上关于webpack的教程已经很多了,但是本人在学习过程中发现很多教程有错误,或者写的很不全面,结果做的过程出现各种各样的问题,对新手不但不友好还会让人浪费很多不必要的时间.所以 ...

  6. webpack轻松入门教程

    webpack之傻瓜式教程及前端自动化入门 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...

  7. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  8. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  9. webpack CommonsChunkPlugin详细教程

    1.demo结构: 2.package.json配置: { "name": "webpack-simple-demo", "version" ...

  10. webpack入门操作教程

    1. webpack介绍 在传统的项目中,一个html文件可能会加载多个js.css文件,如果多人协同开发的话,就会出现全局变量被污染.文件直接的依赖问题 而webpack打包工具,会先分析入口文件的 ...

随机推荐

  1. Chrome插件下载和安装方法

    http://jingyan.baidu.com/article/e4511cf35c2df92b845eafb3.html 扩展程序的下载方法   1 每个 Chrome 扩展程序 都有一个固定的 ...

  2. Mac下显示和隐藏“隐藏文件”

    命令行方式:显示/隐藏Mac隐藏文件命令如下(注意其中的空格并且区分大小写): 显示Mac隐藏文件的命令: defaults write com.apple.finder AppleShowAllFi ...

  3. leetcode-682-Baseball Game

    题目描述: You're now a baseball game point recorder. Given a list of strings, each string can be one of ...

  4. Oracle PL/SQL学习之你需要知道的快捷键

    1.格式化sql语句 Ctrl+A  然后  Ctrl+F7 2.窗口最大化最小化 首选项-->快捷键-->Maximize Toggle,然后修改成自己熟悉的快捷键设置.

  5. [原创] Laravel 启动流程

    目录 1. 程序启动准备 1.1 容器基础配置 1.2 核心类绑定 1.3 实例化 Http 核心类 2. 请求实例化 3. 请求处理 3.1 请求处理环境初始化 1. 环境监测 \Illuminat ...

  6. Ubuntu定时任务设置

    设置很简单,但如果误入歧途,会耽误很多时间 步骤如下: 1. 以root执行:vi /etc/crontab 2. 在文件最后添加cron配置(每天凌晨四点执行,并将日志输出到/data/cron.l ...

  7. 第七次 Scrum Meeting

    第七次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/11 22:00 10min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.11 ...

  8. java BufferedImage 合成多张图片 - 因为JPEGImageEncoder 不能用

    java BufferedImage 合成多张图片 public void createPicTwo2(int x,int y) {     try     {       //读取第一张图片    ...

  9. 性能测试工具Jmeter13-Jmeter跨线程组调用token

    1.正则表达式或者json提取器(我是用json提取器提取的),提取token 2.添加后置处理器BeanShell PostProcessor,然后输入以下函数 3.添加HTTP信息头管理器,写入函 ...

  10. python中 datetime模块的详解(转载)

    Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块我在之前的文章已经有所介绍,它提供 的接口与C标准库time.h基本一致.相比于time模块 ...