第一步:安装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写入内容
<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写入以下内容
//导入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内置模块--路径操作
varpath = require('path');
//开发环境和生产环境--暴露
module.exports= {
//模式,只有两个值development开发环境和production上线环境压缩
mode:"development",
//入口文件
entry: path.join(__dirname,'./src/main.js'),
//出口
output: {
path:path.join(__dirname,'./dist'),//目录如果不存在的话可以创建,--命令行再输入npm start会自动生成dist,就不用
//<script src="../dist/bundle.js"></script>链接html页面,会自动链接,在样式创好再删
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的(设置端口号)为webpack-dev-server --port 8888 --hot --open
在package.json 里面设置 build :"webpack" --用于接收存储dist(隐藏起来)
在main.js输入body样式
$('body').css({background:'grey'});
(先把dist整个文件夹删除--因为安装以上代码这个文件夹会被缓存)
再在命令行输入npm run start验证会实时更新,验证body背景颜色是否显示在页面上
如果需要dist文件夹 再在命令行输入 npm run build
//第五步(css需要 loader 给它正确的解析或转化成为 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:{}对应的函数--将css转换成模块--安装样式模块后可以删除html里面的<scriptsrc="../dist/bundle.js"></script>
module:{
rules:[
//所有以css结尾的文件名,以下代码从右往左进行编译
//css-loader 将文件转成模块
//style-loader 将css模块插入网页文档中
{test:/\.css$/,use:['style-loader','css-loader'],exclude: [/node_modules/,/dist/]},
]
}
在src里面新建style文件夹 --再在里面建立index.css 输入body样式
body{
background:blue!important;
}
在main.js里面 导出模块 import './style/index.css'
//loder 将js文件转换成模块(在webpack.config文件里面)
import'./style/index.css';
再在命令行输入npm start实时更新下看是否成功(看样式蓝色是否出来)
//第六步(less转模块化)(以及sass转模块化)--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里面 导出模块 import './style/style.less'
import'./style/style.less';
import'./style/sass.scss';
在webpack.config.js 写入 module:{rules:{test{}}}对应的函数--将less转换成模块
//less-loader 默认依赖less需要安装
//把less文件转换成css文件
//css-loader 再转换成webpack模块
//style-loader 将css模块插入网页文档中
{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 实时更新下看是否成功(看样式金色是否出来)
//第七步--图片转成模板
命令行输入以下
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{}}}对应的函数--将图片转换成模块
//图片转模块化
{test:/\.(png|jpeg|jpg|gif|wedp)$/,use:[{
loader:"url-loader",
options:{
limit:1024,
name:'[path][name]-[hash:5].ext'}
}]},
再在命令行输入 npm start 实时更新下看是否成功(图片是否出来)
//第八步:es6转换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转模块
{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,创建一个文件 .babelrc 写入以下兼容代码(文件名前面必须加点)
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
再在命令行输入 npm start 实时更新下看是否成功(谷歌成功后,再复制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');
输入完以上代码后随意运行一种,需要现在命令行 ctrl+c 先中止一下,再重新运行npm start 实时更新看结果是否有出来
压缩dist-bundle.js
在webpack.config.js里面修改module.exports -mode的环境为production,再跑一次 npm run build 就压缩成功8.6webpack
命令行装以下,运行进行加快
第十一
npminstall-g @vue/cli
要下载的东西
命令行创建项目:vue create my-project--在文件夹生成my-project文件夹
C:\Users\86137\.vuerc 用记事本打开,false修改为true
命令行输入 vue ui --会打开浏览器页面让你创建新项目
