webpack是前端開發必用的打包工具,在webpack下開發前端會省很多事,變得很簡單.
新建項目和webpack起始簡單配置
第一步,新建npm項目
mkdir web-project
cd web-project
npm init -y第二步,初始化項目:用npm 安裝 vue,webpack等等
npm i webpack vue vue-loader css-loader vue-template-compiler第三步,新建源碼放置目錄
mkdir src在src下新建一個app.vue文件,寫入下面的內容:
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data(){
return {
text: 'abc'
}
}
}
</script>
<style>
#test{
color: red
}
</style>
在項目根目錄 web-project下,新建一個webpack的配置文件,隨意起名爲 webpack.config.js. 在裏面寫入下面的內容:
const path=require('path')
module.exports = {
entry: path.join(__dirname,"src/index.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test:/.vue$/,
loader: "vue-loader"
}
]
}
}在src目錄下新建一個文件index.js,並寫入下面的內容:
import Vue from 'vue'
import App from './app.vue'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h) => h(App)
}).$mount(root)修改package.json
在package.json 裏面找到"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 往”scriptes”添加一個腳本,修改後是這樣的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
}第一次編譯
打開終端,在項目根目錄下運行
npm run build在根目錄下能看到多了一個 dist目錄及其內bundle.js.
webpack配置項目加載各種靜態資源及css預處理器
修改 webpack.config.js ,在module下增加幾個rules,修改後是下面這樣:
...
module: {
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
}
]
}
...用 npm安裝上面rules配置的loader:
npm i style-loader url-loader file-loader現在就可以直接去在js中 import 非 js 的內容了.
js import css 和 圖片
現在做一個簡單的在js代碼中引入 css 和 圖片.
在根目錄下新建 目錄 assets, 在其下新建目錄styles,在其下新建樣式文件 test.css,內容如下:
body{
color: red;
background-image: url("../images/bg.jpg");
}然後在index.js中引入 test.css:
import './assets/styles/test.css'
這樣,等編譯後,test.css的內容就會以js的形式出現在bundle.js中,長得就像這樣:
exports.push([module.i, "body{\n color: red;\n background-image: url(" + escape(__webpack_require__(4)) + ");\n}", ""]);
在test.css中的背景圖片,會用js以base64編碼的方式,寫入到bundle.js中.
現在來看看在js中引入 圖片
在assets下新建目錄images,並放入一張圖片,這裏將其隨意取名爲bg.jpg. 然後就可以在index.js中引入這張圖片,就像下面這樣:
import './assets/images/bg.jpg'運行npm run build編譯後,就能在dist目錄下看到這張圖片,說明編譯已經通過了.
webpack 配置 css 預處理器 stylus
在webpack.config.js文件的rules下,加入新的規則塊:
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
} 現在完整的rules就像這樣了:
...
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
...安裝 stylus-loader:
npm i stylus-loader stylus現在就可以用stylus來寫css了.
同樣的,其他的css預處理器也可以這樣簡單的配置,相應的loader都能在github上面找到.
webpack的loader是一層一層往上扔的,列如:
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]這裏就是 stylus-loader處理完,然後丟給css-loader,然後css-loader處理完又丟給上面的style-loader.
webpack-dev-server的配置和使用
安裝一個包
npm i webpack-dev-server在package.json 裏面找到"scripts": {... ... } 往”scriptes”裏添加一個腳本,修改後是這樣的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},安裝一個包npm i cross-env,這個包用於方便的設置環境變量 .
把剛剛在package.json中寫的腳本命名加上環境變量,就像這樣子的:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},然後修改一下webpack.config.js.修改完後是這個樣子:
const path=require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const config = {
target:'web',
entry: path.join(__dirname,"src/index.js"),
output: {
filename: "bundle.js",
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test:/\.vue$/,
loader: "vue-loader"
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpg|png|svg)$/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
},
plugins: [
//vue等常用到
new webpack.DefinePlugin({
'process.env':{
//單引號裏面是雙引號;
//在這裏定義了的 isDev在代碼裏面可以引用
NODE_ENV:isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin()
]
}
if(isDev){
//設置瀏覽器調試代碼
config.devtool = '#cheap-module-eval-source-map'
// webpack2.0 纔有的devServer配置
config.devServer = {
port:'8000',
host:'0.0.0.0',
overlay:{
//錯誤顯示在網頁上
errors:true,
},
//啓動完後自動打開瀏覽器
open:true,
}
}
module.exports = config
現在,運行 npm run dev ,在瀏覽器中輸入 http://127.0.0.1:8000 已經可以看到一個簡單的vue寫的頁面了.
配置vue開發配置
安裝幾個包:
npm i postcss-loader autoprefixer babel-loader babel-core
npm i babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx在項目根目錄下創建兩個文件:
” .bablerc ” 和 ” postcss.config.js ” ,這兩個分別是bable和postcss的配置文件.
下面是 ” .bablerc “文件的內容:
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}這個文件配置了讓vue支持jsx. jsx可以把HTML寫在js裏面.jsx裏面不能寫樣式,jsx用js寫html,可以做運算之類的,更加的靈活.和vue文件相比,各有各的好處.vue文件結構清晰.
下面是postcss.config.js 的內容:
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
//後處理css代碼,針對一些需要加瀏覽器前綴的css,autoprefixer可以自動處理.
autoprefixer()
]
}這個文件配置了css後處理.
現在,vue的相關配置就搞定了.接下來可以開始寫界面相關的代碼了.
在vue中使用材料設計
vuematerial是一個在vue中使用材料設計的開源庫,官網是 https://vuematerial.io/getting-started .
安裝:
npm install vue-material@beta --savewebpack正式環境打包優化
安裝下面的包:
npm i extract-text-webpack-plugin