## Webpack的配置和使用
### 安装
1. 全局安装
```
npm install webpack -g
```
2. 本地安装
```
npm install webpack -D
```
### 使用
#### 直接通过命令参数来执行
1. 如果是全局安装的
```
webpack 入口文件 出口文件
```
2. 如果是本地安装的
2.1 先在package.json的script标签中添加一条命令(就和全局的命令一模一样)
2.2 通过npm run 命令名 来执行命令 #### 通过配置文件来执行
如果是使用的配置文件,那么在使用webpack的命令的时候,就不需要再传递参数了! 配置文件名为 webpack.config.js, 这个文件一般被放在网站的根目录下 webpack.config.js是一个node.js的模块,所以里面的代码,就是nodejs代码,需要通过nodejs模块化的方式,将配置对象进行导出! 基础配置项
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
}
} ``` ### 使用webpack打包别的类型的文件
webpack默认支持的文件类型,只有js文件,如果在项目中出现了其他类型的文件,那么webpack本身是无法进行处理的,所以我们需要为每一个类型的文件,单独指定一个加载器(loader) #### css
在webpack的项目中,如果要使用css文件,我们可以将css文件当做一个模块,使用import的方式引入到js当中,最终webpack会将css文件中的内容,一起打包到最终的js文件中,也可以在页面中生效 要打包css文件,就需要给css文件配置loader,需要两个loader: style-loader css-loader 1. 安装相应的loader
```
npm install style-loader css-loader -D
```
2. 在webpack.config.js中配置css文件对应的loader
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称,要注意,调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
}
]
}
}
``` #### less sass
less需要的loader: style-loader css-loader less-loader 依赖项: less
sass需要的loader: style-loader css-loader sass-loader 依赖项: node-sass 1. 安装相应的loader 1.1 less-loader:
```
npm install less-loader less -D
```
1.2 sass-loader
```
npm install sass-loader node-sass -D
```
2. 配置加载器
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称,要注意,调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
}
]
}
}
``` #### 图片 字体 打包
图片需要的loader: url-loader 依赖项: file-loader
字体需要的loader: url-loader 1. 安装
```
npm install url-loader file-loader -D
```
2. 配置
```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称,要注意,调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
//图片文件
test: /\.(jpg|gif|png|jpeg|svg|bmp)$/,
use: [{
loader: "url-loader",
options: {
//如果图片超过下面这个数据所标注的大小,那么图片将不会被转换成base64的格式,直接会将图片文件扔到dist目录里
limit: 1024 * 50
}
}]
},
{
//字体文件
test: /\.(woff|woff2|eot|ttf)$/,
use: ["url-loader"]
}
]
}
}
``` ### ES6 代码打包
用到的loader: babel-loader 依赖项: babel-core
用到转码规则: babel-preset-env
1. 安装
```
npm install babel-loader babel-core -D
```
2. 配置
2.1 创建一个.babelrc 用来指定转码的规则
```js
{
presets: [
"env"
]
}
```
2.2 webpack.config.js配置加载器 ```js
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
//module属性中就可以进行loader的配置
module: {
rules: [
{
test: /\.css$/,
//use中放的就是加载器的名称,要注意,调用的顺序是从后向前的
use: ["style-loader", "css-loader"]
},
{
//less文件
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
},
{
//sass文件
test: /\.sass$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
//图片文件
test: /\.(jpg|gif|png|jpeg|svg|bmp)$/,
use: [{
loader: "url-loader",
options: {
//如果图片超过下面这个数据所标注的大小,那么图片将不会被转换成base64的格式,直接会将图片文件扔到dist目录里
limit: 1024 * 50
}
}]
},
{
//字体文件
test: /\.(woff|woff2|eot|ttf)$/,
use: ["url-loader"]
},
{
//ES6
test: /\.js$/,
//排除node_modules中的内容
exclude: /node_modules/,
use: ["babel-loader"]
}
]
}
}
```
### html-webpack-plugin的使用
作用: 将src目录下的index.html作为模板,每次在打包的时候,都会将其复制到dist目录下,并且自动为其引入bundle.js 1. 安装
```
npm install html-webpack-plugin -D
```
2. 配置webpack.config.js
```js
var HtmlWebpackPlugin = require("html-webpack-plugin")
var path = require("path") module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, "src/index.html")
})
]
} ``` ## webpack-dev-server的使用
如果没有这个东西,那么每次在修改代码之后,都需要重新进行打包,才能看到效果! webpack-dev-server可以启动一个简易的http服务器,当代码发生改变的时候,实时的进行打包并且刷新页面显示效果! 这个东西只会打包更新了的内容,并不会将整个项目完整的打包,所以效率会比较高,而且它打包的内容都是直接放在内存里面的,所以访问速率也会非常快 1. 安装
```
npm install webpack-dev-server -D
``` 2. 使用 2.1 直接给命令传参
```
webpack-dev-server --port 9000 --contentBase ./src --hot
```
2.2 在webpack.config.js中进行配置
```js
var path = require("path"); //如果使用webpack.config方式进行配置,那么必须有这个包引入
var webpack = reuqire("webpack"); module.exports = {
entry: path.join(__dirname, "入口文件路径"),
output: {
path: path.join(__dirname, "dist"),
filename: "bundel.js"
},
devServer: {
port: 9999,
contentBase: "./src",
hot: true
},
plugins:[
//这边是给dev-server设置一个插件,如果没有这个插件则热更新会报错
new webpack.HotModuleReplacementPlugin()
]
} ``` ## babel-cli的使用
1. 安装
```
npm install babel-cli -g
npm install babel-preset-env
```
2. 配置
创建.babelrc文件
```
{
presets: [
"env"
]
}
```
3. 使用
```
babel 要转换的文件的路径 --out-file 输出的文件的路径
``` ## 单文件组件
就是将组件相关的内容(HTML JS CSS)全部放到了一个.vue文件当中 ```html
<template>
<div>
//这里就是组件的html部分也就是所谓的模板
</div>
</template> <script>
export default {
data(){},
filters: {},
components: {},
watch: {},
directives: {},
created(){}
}
</script> scoped属性标志着这个style标签中的css样式是只对当前组件有效!
<style scoped>
</style>
``` ## Vue-Cli
这是一个可以快速生成一个项目基本结构的vue工具 1. 安装
```
npm install vue-cli -g
```
2. 使用
```
vue init webpack 项目名称
``` ## 在项目模板中写代码
1. 创建组件!
2. 配置路由! 项目模板的获取两种方式:
1. 自己写的模板
https://github.com/avakpan/vue-template 2. vue-cli生成模板

在使用vue框架的时候对应的webpack.config.js的配置,利用babel转换ES6为ES5的相关配置,以及下载vue项目基本结构的地址,通过vue-cli搭建vue项目基本结构.

关于自己配置有关webpack.config.js和vue项目搭建相关步骤的更多相关文章

  1. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

  2. webpack.config.js和vue.config.js的区别

    webpack.config.js是webpack的配置文件,所有使用webpack作为打包工具的项目都可以使用,vue的项目可以使用,react的项目也可以使用. vue.config.js是vue ...

  3. webpack.config.js文件的高级配置

    一.多个入口文件之前我们配置的都是 一个入口 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.Co ...

  4. 配置webpack.config.js中的文件

    webpack.config.js文件中,主要包括 entry:入口文件 output:出口文件 module:模块 plugins:插件 这几部分 1.基本配置 运行 webpack 这一命令可以将 ...

  5. webpack.config.js配置遇到Error: Cannot find module '@babel/core'&&Cannot find module '@babel/plugin-transform-react-jsx' 问题

    下文是网上找到的方法,是因为版本冲突的原因,参照后安装7版本解决 cnpm install -D babel-loader@ babel-core babel-preset-env 一. 问题描述 在 ...

  6. [转]webpack4.0.1安装问题和webpack.config.js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  7. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  8. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  9. webpack.config.js====CSS相关:css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

随机推荐

  1. 2020牛客寒假算法基础集训营1 J题可以回顾回顾

    2020牛客寒假算法基础集训营1 这套题整体来说还是很简单的. A.honoka和格点三角形 这个题目不是很难,不过要考虑周全,面积是1,那么底边的长度可以是1也可以是2, 注意底边1和2会有重复的, ...

  2. 浅析java中ClassLoader如何加载Class

    我的博客地址:https://blog.csdn.net/qq_41907991 ClassLoader是一个经常出现又让很多人望而却步的词.本文试图以最浅显易懂的方式来讲解ClassLoader,希 ...

  3. 【FPGA篇章二】FPGA开发流程:详述每一环节的物理含义和实现目标

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 FPGA的开发流程是遵循着ASIC的开发流程发展的,发展到目前为止,FPGA的开发流程总体按照下图进行,有些步骤可能由于其在当前项目中的条件 ...

  4. leetcode_课程表(BFS、拓扑排序)

    题目描述: 你这个学期必须选修 numCourse 门课程,记为 0 到 numCourse-1 .在选修某些课程之前需要一些先修课程. 例如,想要学习课程 0 ,你需要先完成课程 1 ,我们用一个匹 ...

  5. 【Hadoop离线基础总结】Hue与oozie集成

    目录 1.停止oozie与hue的进程 2.修改oozie的配置文件 3.修改hue的配置文件 4.启动hue与oozie的进程 5.页面访问hue 1.停止oozie与hue的进程 bin/oozi ...

  6. 老板:kill -9 的原理都不知道就敢去线上执行?明天不用来了!

    GitHub 14.5k Star 的Java工程师成神之路,开放阅读了! 相信很多程序员对于Linux系统都不陌生,即使自己的日常开发机器不是Linux,那么线上服务器也大部分都是的,所以,掌握常用 ...

  7. Python基础语法day_03——列表

    day_03 列表是什么 在Python中,用[]来表示列表,并用逗号来分隔其中的元素.下面是一个简单的列表示例: >>> bicycles = ['treak','cannonda ...

  8. Python内置函数示例

    abs() 返回数字绝对值 >>> abs(-100) 100 >>> abs(10) 10 >>> all() 判断给定的可迭代参数 itera ...

  9. SpringBoot教程——检视阅读

    SpringBoot教程--检视阅读 参考 SpringBoot教程--一点--蓝本--springboot2.1.1 SpringBoot教程--易百--springboo2.0.5.RELEASE ...

  10. python3.x 基础六:面向对象

    面向对象特性 class 类 一个类是对一类拥有相同属性的对象的描述,在类中定义了这些对象都具备的属性/共同方法 object对象 一个对象指一个类实例化后的实例,一个类必须经过实例化后才能在程序中调 ...