安装

本地安装

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

全局安装

  1. npm install -g webpack
  2. npm install -g webpack-cli

初始化项目

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

基本目录结构

webpack配置表

按项目结构编写代码

  1. //package.json
  3.   {
  4.     "name": "webpack-demo",
  5.     "version": "1.0.0",
  6.     "description": "",
  7.     "main": "index.js",
  8.     "scripts": {
  9.       "test": "echo \"Error: no test specified\" && exit 1",
  10.     },
  11.     "keywords": [],
  12.     "author": "",
  13.     "license": "ISC",
  14.     "devDependencies": {
  15.       "webpack": "^4.0.1",
  16.       "webpack-cli": "^2.0.9",
  17.       "lodash": "^4.17.5"
  18.     }
  19.   }
  21. //webpack.config.js
  23. const path = require('path');
  25.     module.exports = {
  26.       entry: './src/index.js',
  27.       output: {
  28.         filename: 'bundle.js',
  29.         path: path.resolve(__dirname, 'dist')
  30.       }
  31.     };
  33. //index.html
  35. <!doctype html>
  36. <html>
  37.   <head>
  38.     <title>demo</title>
  39.   </head>
  40.   <body>
  41.     <script src="./src/index.js"></script>
  42.   </body>
  43. </html>
  45. //index.js
  47. function component() {
  49.     var element = document.createElement('div');
  50.     var node = document.createTextNode("hello,webpack!");
  51.     element.appendChild(node);
  52.     return element;
  53. }
  54. document.body.appendChild(component());

下载安装包

  1. //production模式
  2. npm install --save [+安装包名称]
  4. //development模式
  5. npm install --save-dev

运行项目

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

  1. npx webpack

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

  1. //package.json
  3.   {
  4.     "name": "webpack-demo",
  5.     "version": "1.0.0",
  6.     "description": "",
  7.     "main": "index.js",
  8.     "scripts": {
  9.       "test": "echo \"Error: no test specified\" && exit 1",
  10. +     "build": "webpack"  //新增
  11.     },
  12.     "keywords": [],
  13.     "author": "",
  14.     "license": "ISC",
  15.     "devDependencies": {
  16.       "webpack": "^4.0.1",
  17.       "webpack-cli": "^2.0.9",
  18.       "lodash": "^4.17.5"
  19.     }
  20.   }

loader

加载css文件

react默认不支持css文件,所以需要进行转码.
  1. // webpack.config.js
  3.    module: {
  4.      rules: [
  5.        {
  6.          test: /\.css$/,
  7.          use: [
  8.            'style-loader',
  9.            'css-loader'
  10.          ]
  11.        }
  12.      ]
  13.    }

加载图片

  1.     module: {
  2.       rules: [
  3.        {
  4.          test: /\.(png|svg|jpg|gif)$/,
  5.          use: [
  6.            'file-loader'
  7.          ]
  8.        }
  9.     ]
  10.    }

加载字体

  1.     module: {
  2.       rules: [
  4.        {
  5.          test: /\.(woff|woff2|eot|ttf|otf)$/,
  6.          use: [
  7.            'file-loader'
  8.          ]
  9.        }
  10.       ]
  11.     }

加载数据

  1.     module: {
  2.       rules: [
  3.        {
  4.          test: /\.(csv|tsv)$/,
  5.          use: [
  6.            'csv-loader'
  7.          ]
  8.        },
  9.        {
  10.          test: /\.xml$/,
  11.          use: [
  12.            'xml-loader'
  13.          ]
  14.        }
  15.       ]
  16.     }

全局资源

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

插件的使用

比如使用一个HtmlWebpackPlugin

安装
  1. npm install --save-dev html-webpack-plugin
使用
  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2.   module.exports = {
  3.     entry: './src/index.js',
  5. +   plugins: [
  6. +     new HtmlWebpackPlugin({
  7. +       title: 'Output Management'
  8. +     })
  9. +   ],
  11.     output: {
  12.       filename: '[name].bundle.js',
  13.       path: path.resolve(__dirname, 'dist')
  14.     }
  15.   };

source map

准确追踪错误和警告

  1. // webpack.config.js
  3.     const path = require('path');
  5.     module.exports = {
  6.       entry: './src/index.js',
  7. +     devtool: 'source-map',
  8.       output: {
  9.         filename: 'bundle.js',
  10.         path: path.resolve(__dirname, 'dist')
  11.       }
  12.     };

开发工具

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

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

安装

  1. npm install --save-dev webpack-dev-server

使用

  1. //webpack.config.js
  3.   const path = require('path');
  5.   module.exports = {
  6.     entry: './src/index.js',
  7. +   devServer: {
  8. +     contentBase: './dist'
  9. +   },
  10.     output: {
  11.       filename: 'bundle.js',
  12.       path: path.resolve(__dirname, 'dist')
  13.     }
  14.   };

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. 简单的数字校验JS

    /** *张衍涛 * 数字校验 v:校验的元素 l:要保留的小数点位数 */ function checkNumber(v,l){ var val=v.value; if(isNaN(val) || ...

  2. 快速上手日期插件laydate

    1.laydate 这款插件有独立版的,也有作为layui模块的,两种使用方式差不多,就引入有区别而已 <!--这是作为模块使用--><!DOCTYPE html> <h ...

  3. 用IDA辅助分析grub的小技巧

    IDA可以辅助我们分析grub的代码,但是bootloader本身只是bin文件,为了让IDA能正确识别分析,我们还需要提供一些基本的参数,比如文件加载到内存的地址等. 图中MBR是加载到0x7C00 ...

  4. POJ-2251-Dungeon Master（3D迷宫，BFS）

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 48111   Accepted: 18149 ...

  5. babel初学教程

    babel安装 安装前你需要安装node.js和npm以及gulp三个包. 然后执行以下命令 $ npm init 然后在安装 babel和babel-core两个包 $ npm install -- ...

  6. HTTP请求处理流程-SpringMvc

    1.在SpringMVC的http请求处理过程中,包括了前端控制器(DispatcherServlet).处理映射器(HandlerMapping).处理适配器(HandlerAdapter).处理器 ...

  7. eclipse项目目录展示结构设置

    我因为前后端都搞过, 解除过很多的开发IDE,说真的,很多的项目目录结构都是一级一级分开,然后我可以通过展开等操作来查看文件等资源信息,结果呢?java的开发IDE eclipse默认的项目目录展示简 ...

  8. NASA的10条代码编写原则

    NASA的10条代码编写原则 作者: Gerard J. Holzmann 来源: InfoQ 原文链接 英文原文:NASA's 10 Coding Rules for Writing Safety ...

  9. CF1097D Makoto and a Blackboard（期望）

    [Luogu-CF1097D] 给定 \(n,k\)一共会进行 \(k\) 次操作 , 每次操作会把 \(n\) 等概率的变成 \(n\) 的某个约数 求操作 \(k\) 次后 \(n\) 的期望是多 ...

  10. 移动端自动化测试之Appium实战

    软件工程的趋势:目前大部分企业的软件研发模式是持续交付,而自动化是持续交付的根基,而且不仅仅是测试要自动化,所有的环节都在自动化,自动化是未来的方向这一点已成为行业共识. 之前咱们已经讲过了AppCr ...