第一步:安裝webpack,在命令行輸入npm install -g webpack webpack-cli?
新建一個08webpack文件夾--里面新建src文件夾--src里面新建indedx.html,main.js
命令行輸入npm init -y--生成package.json
命令行輸入npm install jquery--生成node_modules
在index.html寫入內(nèi)容
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
在main.js寫入以下內(nèi)容
//導(dǎo)入jquery
import$from'jquery';
//寫入樣式
$('li:even').css({background:'red'});
$('li:odd').css({background:'lime'});
在package.json-scripts里面寫入以下
"start":"webpack ./src/main.js -o ./dist/bundle.js"
命令行輸入 npm start?生成 dist文件夾(bundle.js--文件)
把bundle.js?拉進index.html?里面, 再打開瀏覽器看是否有生成js-css樣式
//第二步:
08webpack里面新建一個webpack.config.js ,寫入以下代碼
//值允許使用common.js
//只是一個配制文件
//引入path內(nèi)置模塊--路徑操作
varpath = require('path');
//開發(fā)環(huán)境和生產(chǎn)環(huán)境--暴露
module.exports= {
//模式,只有兩個值development開發(fā)環(huán)境和production上線環(huán)境壓縮
mode:"development",
//入口文件
entry: path.join(__dirname,'./src/main.js'),
//出口
output: {
path:path.join(__dirname,'./dist'),//目錄如果不存在的話可以創(chuàng)建,--命令行再輸入npm start會自動生成dist,就不用
//<script src="../dist/bundle.js"></script>鏈接html頁面,會自動鏈接,在樣式創(chuàng)好再刪
filename:"bundle.js",//打包的js文件名稱
},
};
在webpack.config.js里面的路徑寫入成功后,
在命令行輸入npm install webpack webpack-cli -D--安裝本地webpack
在package.json 里面修改srart的值為webpack
再在命令行 npm run start--看是否成功--(可以修改下main.js樣式,再跑一次,看頁面顯示的顏色是否成功)
//第三步:
在命令行輸入npm install html-webpack-plugin -D--安裝插件--(會在package.json生成"html-webpack-plugin":"^3.2.0",)
在webpack.config.js? 寫入插件
//專門的插件
varHtmlWebpackPlugin=require('html-webpack-plugin');
以下代碼寫入module.export{}里面
plugins: [
newHtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:"index.html"
})
],
然后使用插件,再在命令行輸入npm run start驗證是否-成功(運行完之后會在dist里面生成index.html--并壓縮它)--
//第四步(安裝熱更新-端口號)
在命令行輸入?npm install webpack-dev-server -D? --安裝?熱更新,端口號之類的(會在package.json生成"webpack-dev-server":"^3.7.2")
在package.json?里面修改srart的(設(shè)置端口號)為webpack-dev-server --port 8888 --hot --open
在package.json?里面設(shè)置 build :"webpack" --用于接收存儲dist(隱藏起來)
在main.js輸入body樣式
$('body').css({background:'grey'});
(先把dist整個文件夾刪除--因為安裝以上代碼這個文件夾會被緩存)
再在命令行輸入npm run start驗證會實時更新,驗證body背景顏色是否顯示在頁面上
如果需要dist文件夾?再在命令行輸入?npm run build
//第五步(css需要 loader 給它正確的解析或轉(zhuǎn)化成為 webpack 認識的模塊)
在命令行輸入npm i style-loader -D--
在命令行輸入?npm install css-loader -D? --安裝以上兩個樣式--會在package.json里面生成??"css-loader":"^3.2.0",?"style-loader":"^1.0.0",
在webpack.config.js 寫入 module:{}對應(yīng)的函數(shù)--將css轉(zhuǎn)換成模塊--安裝樣式模塊后可以刪除html里面的<scriptsrc="../dist/bundle.js"></script>
module:{
rules:[
//所有以css結(jié)尾的文件名,以下代碼從右往左進行編譯
//css-loader 將文件轉(zhuǎn)成模塊
//style-loader 將css模塊插入網(wǎng)頁文檔中
{test:/\.css$/,use:['style-loader','css-loader'],exclude: [/node_modules/,/dist/]},
]
}
在src里面新建style文件夾 --再在里面建立index.css? 輸入body樣式
body{
background:blue!important;
}
在main.js里面 導(dǎo)出模塊 import './style/index.css'
//loder 將js文件轉(zhuǎn)換成模塊(在webpack.config文件里面)
import'./style/index.css';
再在命令行輸入npm start實時更新下看是否成功(看樣式藍色是否出來)
//第六步(less轉(zhuǎn)模塊化)(以及sass轉(zhuǎn)模塊化)--sass樣式強于less>css,會覆蓋less&css
命令行輸入npm i less-loader -D和npm i less -D &?npm install sass-loader node-sass -D
--會在package.json里面生成??"less":"^3.9.0",?"less-loader":"^5.0.0",
在style里面新建style.less 寫body入樣式用變量 @color
@color:gold;
body{
background:@color?!important;
}
在style里面新建sass.scss 寫body入樣式
body{
background:blue?!important;
}
在main.js里面 導(dǎo)出模塊 import './style/style.less'
import'./style/style.less';
import'./style/sass.scss';
在webpack.config.js 寫入 module:{rules:{test{}}}對應(yīng)的函數(shù)--將less轉(zhuǎn)換成模塊
//less-loader 默認依賴less需要安裝
//把less文件轉(zhuǎn)換成css文件
//css-loader 再轉(zhuǎn)換成webpack模塊
//style-loader 將css模塊插入網(wǎng)頁文檔中
{test:/\.less$/,use:['style-loader','css-loader','less-loader'],exclude: [/node_modules/]},
//新增
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader'],exclude: [/node_modules/]},
再在命令行輸入 npm start 實時更新下看是否成功(看樣式金色是否出來)
//第七步--圖片轉(zhuǎn)成模板
命令行輸入以下
npm install url-loader -D
npm i file-loader -D?
在src里面新建images文件夾放入圖片
在style.less?寫body入樣式?插入圖片
@color:gold;
body{
background:@colorurl("../images/dog.jpg")!important;
}
在webpack.config.js 寫入 module:{rules:{test{}}}對應(yīng)的函數(shù)--將圖片轉(zhuǎn)換成模塊
//圖片轉(zhuǎn)模塊化
{test:/\.(png|jpeg|jpg|gif|wedp)$/,use:[{
loader:"url-loader",
options:{
limit:1024,
name:'[path][name]-[hash:5].ext'}
}]},
再在命令行輸入 npm start 實時更新下看是否成功(圖片是否出來)
//第八步:es6轉(zhuǎn)換es5--用于IE瀏覽器兼容
命令行輸入以下
npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D
在webpack.config.js里面在module 寫入以下代碼--檢測IE兼容
//js轉(zhuǎn)模塊
?{test:/\.js$/,use:['babel-loader'],exclude: [/node_modules/,/dist/]}?
在main.js輸入以下代碼
//用于IE兼容測試
classPerson{
constructor(name){
this.name=name;
}
}
varp1=newPerson('ZZ');
console.log(p1);
在08webpack,創(chuàng)建一個文件 .babelrc?寫入以下兼容代碼(文件名前面必須加點)
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
再在命令行輸入 npm start 實時更新下看是否成功(谷歌成功后,再復(fù)制http://localhost:8888/)去IE測試
(測試是否有console.log()的輸出)
在package.json里面命令行安裝上的以下五項必須記得
"babel-core":"^6.26.3",
"babel-loader":"^7.1.5",
"babel-plugin-transform-runtime":"^6.23.0",
"babel-preset-env":"^1.7.0",
"babel-preset-stage-0":"^6.24.1",
//第九步--引入vue
npm install -D vue-loader vue-template-compiler vue-style-loader
npm install -D vue-loader vue-template-compiler vue-style-loader
npm install vue -S
在webpack.config.js里面在寫入以下代碼--//引用vue
//引用vue
constVueLoaderPlugin = require('vue-loader/lib/plugin')
在webpack.config.js里面在plugins寫入以下代碼
new?VueLoaderPlugin()
在webpack.config.js里面在module 寫入以下代碼
//配置vue模板
{test:/\.vue$/,use: ['vue-loader']},
在webpack.config.js里面在module?修改以下代碼-style前面加上vue
{test:/\.css$/,use: ['vue-style-loader','css-loader']},
{test:/\.less$/,use: ['vue-style-loader','css-loader','less-loader']},
在index.html里面輸入
<divid="app"></div>
在main.js輸入以下代碼(可以把之前main.js試驗代碼全部刪除)
importVuefrom"vue";
importMyHeaderfrom"./MyHeader.vue";
varvm=newVue(MyHeader).$mount('#app');
在src里面新建MyHeader.vue文件 ,輸入以下代碼
<template>
<div>
MyHeader
</div>
</template>
<script>
export default{
name:"MyHeader"
}
</script>
<stylescoped>
</style>
再在命令行輸入 npm start 實時更新下看是否成功(是否有MyHeader輸出)
vue-style?對組件樣式私有化
scope? 局部作用域
//第十步
在webpack.config.js里面modules.export里面輸入以下代碼
//編譯運行
resolve: {
alias: {
'vue$':'vue/dist/vue.esm.js'
}
}
在main.js里面輸入以下代碼
//第一種編譯運行()--
varvm=newVue({
template:`<my-header></my-header>`,
components:{MyHeader}
}).$mount('#app');
////運行時第二種繁瑣
varvm=newVue({
render(h) {
returnh(MyHeader);
},
}).$mount('#app');
輸入完以上代碼后隨意運行一種,需要現(xiàn)在命令行 ctrl+c?先中止一下,再重新運行npm start?實時更新看結(jié)果是否有出來
壓縮dist-bundle.js?
在webpack.config.js里面修改module.exports?-mode的環(huán)境為production,再跑一次 npm run build?就壓縮成功8.6webpack
命令行裝以下,運行進行加快
第十一
npminstall-g @vue/cli
要下載的東西
命令行創(chuàng)建項目:vue create my-project--在文件夾生成my-project文件夾
C:\Users\86137\.vuerc? 用記事本打開,false修改為true
命令行輸入 vue ui --會打開瀏覽器頁面讓你創(chuàng)建新項目
