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 -D1.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 --hot2.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文件當中
<template>
<div>
//這里就是組件的html部分也就是所謂的模板
</div>
</template>
<script>
export default {
data(){},
filters: {},
components: {},
watch: {},
directives: {},
created(){}
}
</script>
scoped屬性標志著這個style標簽中的css樣式是只對當前組件有效！
<style scoped>
</style>
Vue-Cli
這是一個可以快速生成一個項目基本結構的vue工具
- 安裝
npm install vue-cli -g
- 使用
vue init webpack 項目名稱
在項目模板中寫代碼
- 創建組件！
- 配置路由！
項目模板的獲取兩種方式：
vue-cli生成模板
