1. webpack 概念

[文档地址](https://www.webpackjs.com/concepts/)

2. webpack 命令使用及相关工具包

1. webpack 安装和打包命令:
$ npm i webpack --save-dev
$ webpack [source] [destination] 2. webpack 热部署工具安装和使用命令:
$ npm i webpack-dev-server --save-dev //安装
$ webpack-dev-derver --open --port [port] --contentBase [content] --hot
--open //自动打开浏览器
--port //指定端口号
--contentBase //指定根目录
--hot //打开热部署 3. webpack 需要的第三方包:
$ npm i vue-loader vue-template-complier
$ npm i babel-core babel-loader babel-plugin-transform-runtime
$ npm i babel-preset-env babel-preset-stage-0

3. webpack 配置文件模板

//webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件
output: { //指定输出项
path: path.join(__dirname, './dist'), //输出路径
filename: 'bundle.js' //指定输出文件名
},
plugins: [
new webpack.HotModuleReplacementPlugin(), //配置热部署
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), //指定模板文件路径
filename: 'index.html' //指定浏览器打开的文件名
})
],
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理.css文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理.less文件的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //处理.scss的loader
{ test: /\.(jpg|png|gif|jpeg|bmp)$/, use: 'url-loader?limit=[limit]&name=[hash:num]-[name].[ext]' }, //处理图片的loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, //处理字体的loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel转换高级的ES语法
{ test: /\.vue$/, use: 'vue-loader' }, //处理.vue文件的loader
]
},
resolve: {
"alias": {
"vue$": "vue/dist/vue.js"
}
}
};

Webpack 打包工具的更多相关文章

  1. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  2. vue 之webpack打包工具的使用

    一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.c ...

  3. Vue学习【第四篇】:Vue 之webpack打包工具的使用

    什么是webpack webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个.vue文件中都可能html.js.css甚 ...

  4. Webpack打包工具学习使用

    Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...

  5. webpack打包工具的初级使用方法

    这里下载的是webpack的3.8.1版本(新版更新的使用有些问题) 什么是webpack? 他是一个前端资源加载或打包工具,. 资源: img css json等. 下载的话 用 npm webpa ...

  6. # webpack 打包工具(vue)

    vue-webpack 打包工具 我的github iSAM2016 不是教程,是自我总结 目录 webpack.base.conf.js webpack.dev.conf.js webpack.pr ...

  7. Webpack实战(一):Webpack打包工具安装及参数配置

    为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...

  8. webpack打包工具

    目的:平时小项目中例如一些网站需要进行打包压缩,用这个工具可以进行打包压缩,就可以上传到服务器. 使用方法: 1,引进需要打包的项目,把入口html替换掉项目中的index.html,把引进的js,c ...

  9. webpack打包工具之ts版开发框架搭建

    本文用两个框架,一个是threejs,一个是phaser3,其实流程都是一样. nodejs.npm是基础,不再多说! 首先新建一个文件夹命名three-study,然后npm init -y 用we ...

随机推荐

  1. udev规则(转)

    Writing udev rules by Daniel Drake (dsd)Version 0.74 The most recent version of this document can al ...

  2. java web开发入门三(Hibernate)基于intellig idea

    Hibernate 1.开发流程 项目配置好后的结构: 1.下载源码: 版本:hibernate-distribution-3.6.0.Final 2.引入hibernate需要的开发包(3.6版本) ...

  3. postgresql小计

    1. postgresql执行结束后,判断结果是否成功,有几种结果 typedef enum { PGRES_EMPTY_QUERY = 0, /* empty query string was ex ...

  4. json for modern c++(nlohmann json)使用小计

    前言 一开始使用jsoncpp,但是jsoncpp已经不更新了,nlohmann还在更新,并且jsoncpp做过一次大的版本升级,导致api不兼容,以前使用过的工程代码不能很好的升级到新的版本,并且j ...

  5. Docker方式安装SonarQube

    获取镜像 docker pull postgres: docker pull sonarqube:-community 启动镜像 docker run -d -p : -e POSTGRES_PASS ...

  6. 依赖注入(DI)与控制反转(IOC)基础知识

    依赖注入(DI)与控制反转(IOC)基础知识 一.什么是依赖注入? 依赖注入英文是Dependcy Injection简写DI,依赖注入会将所依赖的对象自动交由目标对象使用,而不是让对象自己去获取. ...

  7. Alpha冲刺——总结篇

    课程信息 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺 团队目标 切实可行的计算机协会维修预约平台 团队信息 队员学号 队员姓名 个人博客地址 备注 22 ...

  8. SQLServer ---------- 附加数据库,以及解决附加时出现错误

    附加数据库的目的,进行数据库的转移,将需要的数据库,进行转移,软件在部署的时候,会经常使用 附加识别的数据库文件后缀是:  .mdf 方法: 1.首先把准备好的数据库文件,放到需要还原数据库的的电脑上 ...

  9. linux 判断一个用户是否存在

    #!/bin/bash read -p "please input a username:" username >&; then echo "user ex ...

  10. 红黑树和AVL树的区别(转)

    add by zhj: AVL树和红黑树都是平衡二叉树,虽然AVL树是最早发明的平衡二叉树,但直接把平衡二叉树等价于AVL树,我认为非常不合适. 但很多地方都在这么用.两者的比较如下 平衡二叉树类型 ...