Webpack的配置和使用
安装
全局安装
npm install webpack -g
本地安装
npm install webpack -D
使用
直接通过命令参数来执行
如果是全局安装的
webpack 入口文件 出口文件
如果是本地安装的
2.1 先在package.json的script标签中添加一条命令(就和全局的命令一模一样)
2.2 通过npm run 命令名 来执行命令
通过配置文件来执行
如果是使用的配置文件,那么在使用webpack的命令的时候,就不需要再传递参数了!
配置文件名为 webpack.config.js, 这个文件一般被放在网站的根目录下
webpack.config.js是一个node.js的模块,所以里面的代码,就是nodejs代码,需要通过nodejs模块化的方式,将配置对象进行导出!
基础配置项
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
安装相应的loader
npm install style-loader css-loader -D
在webpack.config.js中配置css文件对应的loader
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
安装相应的loader
1.1 less-loader:
npm install less-loader less -D
1.2 sass-loader
npm install sass-loader node-sass -D
配置加载器
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
安装
npm install url-loader file-loader -D
配置
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
安装
npm install babel-loader babel-core -D
配置
2.1 创建一个.babelrc 用来指定转码的规则
{
presets: [
"env"
]
}
2.2 webpack.config.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
安装
npm install html-webpack-plugin -D
配置webpack.config.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服务器,当代码发生改变的时候,实时的进行打包并且刷新页面显示效果! 这个东西只会打包更新了的内容,并不会将整个项目完整的打包,所以效率会比较高,而且它打包的内容都是直接放在内存里面的,所以访问速率也会非常快
安装
npm install webpack-dev-server -D
使用
2.1 直接给命令传参
webpack-dev-server --port 9000 --contentBase ./src --hot
2.2 在webpack.config.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的使用
安装
npm install babel-cli -g
npm install babel-preset-env
配置
创建.babelrc文件
{
presets: [
"env"
]
}
使用
babel 要转换的文件的路径 --out-file 输出的文件的路径
单文件组件
就是将组件相关的内容(HTML JS CSS)全部放到了一个.vue文件当中
//这里就是组件的html部分也就是所谓的模板
export default {
data(){},
filters: {},
components: {},
watch: {},
directives: {},
created(){}
}
scoped属性标志着这个style标签中的css样式是只对当前组件有效!
Vue-Cli
这是一个可以快速生成一个项目基本结构的vue工具
安装
npm install vue-cli -g
使用
vue init webpack 项目名称
在项目模板中写代码
创建组件!
配置路由!
项目模板的获取两种方式: