Webpack的配置和使用
安裝
- 全局安裝
npm install webpack -g
- 本地安裝
npm install webpack -D
使用
直接通過命令參數來執(zhí)行
- 如果是全局安裝的
webpack 入口文件 出口文件
- 如果是本地安裝的
2.1 先在package.json的script標簽中添加一條命令（就和全局的命令一模一樣）
2.2 通過npm run 命令名 來執(zhí)行命令
通過配置文件來執(zhí)行
如果是使用的配置文件，那么在使用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屬性中就可以進行l(wèi)oader的配置
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屬性中就可以進行l(wèi)oader的配置
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屬性中就可以進行l(wèi)oader的配置
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
用到轉碼規(guī)則： babel-preset-env
- 安裝
npm install babel-loader babel-core -D
-
配置
2.1 創(chuàng)建一個.babelrc 用來指定轉碼的規(guī)則{ 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屬性中就可以進行l(wèi)oader的配置 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服務器忽舟，當代碼發(fā)生改變的時候，實時的進行打包并且刷新頁面顯示效果淮阐！ 這個東西只會打包更新了的內容叮阅，并不會將整個項目完整的打包，所以效率會比較高泣特，而且它打包的內容都是直接放在內存里面的浩姥，所以訪問速率也會非常快
- 安裝
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
- 配置
創(chuàng)建.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 項目名稱
在項目模板中寫代碼
- 創(chuàng)建組件膏孟！
- 配置路由缴饭！
項目模板的獲取兩種方式：
vue-cli生成模板
