-
全局安装 nrm:
npm install nrm -g- 查看镜像源
nrm ls - 切换淘宝镜像源
nrm use taobao - 全局安装webpack
npm install webpack@1.14.0 -g
2.4. webpack 进行代码打包
导出一个模块
module.exports = 需要导出的对象导入一个模块
var 模块名 = require(文件路径)webpack 打包命令
webpack 需要打包的文件名 输出的文件名例如:
webpack main.js build.js
2.5. webpack 配置文件- 默认配置文件名称webpack.config.js
module.exports = {
entry:'需要打包的文件' // 路径+文件名 一般为 ./src/xxx.js
output:{
path:'输出文件的路径' // 绝对路径 使用__dirname + 路径
filename:*输出文件的名称*// 一般都为build.js/bundle.js
}
}- 使用webpack进行打包
- 如果是默认配置文件 则直接在命令行中 输入webpack
- 如果是其他改过名字的配置文件 则使用webpack --config 配置文件名
2.6. webpack loader的使用
- 查看镜像源
loader：预处理器。在js代码执行之前需要执行的一些处理。
2.6.1. css-loader
css-loader 是进行css解析，能够使浏览器正常识别js文件中导入的 css 文件
1. 初始化package.json
npm init
2. 安装css-loader以及style-loader
npm install style-loader css-loader --save-dev
3. 在webpack.config.js文件中进行配置
module:{
loaders:[
{
test: /\.css$/,
loader:'style-loader!css-loader'
}
]
}
2.6.2. sass-loader 的使用
sass-loader是进行scss文件的解析
1. 安装sass-loader
npm install node-sass sass-loader style-loader css-loader --save-dev
2.配置sass-loader
loaders:[
{
test: /\.scss$/,
loader:'style-loader!css-loader!sass-loader'
}
]
2.6.3. less-loader 的使用
less-loader是进行less文件的解析
1. 安装scss-loader
npm install less less-loader style-loader css-loader --save-dev
2.配置scss-loader
loaders:[
{
test: /\.less$/,
loader:'style-loader!css-loader!less-loader'
}
]
2.6.4. url-loader 的使用
url-loader是进行url资源的解析
1. 安装url-loader
npm install file-loader url-loader --save-dev
2.配置url-loader
loaders:[
{
test: /\.(png|jpg|gif|ttf)$/,
loader:'url-loader!limit=20000&name=images/[hash:8].[name].[ext]'
// limit单位是字节 1kb = 1024b(字节)
// 对于比较小的图片资源可以使用limit进行限制
// 小于limit值转换成base64字符串内嵌到js代码中
// 大于limit值的图片才转成URL进行网络请求
}
]
2.6.5. webpac-dev-server的使用
1. 安装webpack-dev-server
npm install webpack@1.14.0 webpack-dev-server@1.16.0 --save-dev
2. 安装自动生成HTML文件的插件
npm install html-webpack-plugin@2.28.0 --save-dev
3. 修改package.json文件
"scripts": {
"dev": "webpack-dev-server --hot --inline --open --port 5008"
},
4. 配置webpack.config.js中的内容
- 引入html-webpack-plugin
`var htmlWP = require('html-webpack-plugin');`
- 在modul.exports中加入
plugins:[
new htmlWP({
title: '首页', //生成的页面标题
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'template.html' //根据template.html这个模板来生成(这个文件程序员自己书写)
})
]
5. 运行 npm run dev
2.6.6. babel-loader的使用
babel-loader是用来将es6语法转换成es5语法
1. 安装babel-loader
npm install babel-core@6.24.0 babel-loader@6.4.1 babel-preset-es2015@6.24.0 babel-plugin-transform-runtime@6.23.0 --save-dev
2. 配置webpack.config.js文件
{
test: /\.js$/, // 将.js文件中的es6语法转成es5语法
loader:'babel-loader',
exclude:/node_modules/ // 排除node_modules文件夹下的js文件不用被转换
}
3. 配置babel的转码规则
babel:{
presets:['es2015'], // 配置将es6语法转换成es5语法
plugins:['transform-runtime'] // 用来解析vue文件
}
2.7. webpack解析vue文件
2.7.1. 安装vue-loader解析.vue文件
1. 安装相关包
`npm install vue vue-loader@11.3.4 vue-template-compiler babel-plugin-transform-runtime@6.23.0 --save-dev`
2. 配置webpack.config.js文件
{
test: /.vue$/, // 解析 .vue 组件页面文件
loader:'vue-loader'
}
2.7.2. .vue文件基本代码结构
一个.vue文件就是一个vue的组件
// 1. 组件模板
<template>
<div>
<span v-text="msg" class="red"></span>
</div>
</template>
// 2. 负责导出vue的对象
<script>
// 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)
export default{ // es6的导出对象的写法
data(){ //等价于 es5的 data:function(){
return {
msg :'hello vuejs'
}
},
methods:{
},
created(){
}
}
</script>
// 3. 书写组件内部的样式
<style scoped>
// scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其 他组件页面
.red{
color: red;
}
</style>
2.7.3. 项目入口文件main.js中渲染组件
// 1.0 导入vue核心包
// 凡是使用npm安装的包 引入的时候都不需要写相对路径 只需要写包名即可
import Vue from 'vue';
// 2.0 导入App.vue的vue对象
import App from './App.vue';
// 3.0 利用Vue对象进行解析渲染
new Vue({
el:'#app',
render:function(create){return create(App)} //es5的写法
// render:c=>c(App) // es6的函数写法 =>：goes to
});
2.8. 使用webpack以及npm创建项目
1. 创建项目文件夹
2. 创建npm的配置文件package.json
npm init -y
3. 创建webpack配置文件(webpack.config.js)
4. 根据项目需求安装所需要使用的模块
npm install 包名 --save-dev