一.Webpack的安装
webpack安装依赖nodejs，下面介绍是基于系统已安装node.js
webpack3.6.0 是vue cli2脚手架依赖的版本
npm install webpack@3.6.0 -g(全局安装)
二.webpack模块化开发基本目录结构
下面是一个最基础的webpack目录结构
src 源代码放置目录
dist（distribution发布）代码发布目录
当进行模块化开发时，js代码之间有依赖（CommonJS或ES6模块化开发），我们可以将依赖的js文件打包成一个文件，然后在index.html引用打包后的文件
webpack .\src\main.js .\dist\boundle.js
三.使用webpack.config.js配置文件
webpack.config.js这个js文件就是打包时的配置文件，设置打包入口entry，和打包后代码存放的路径output等，如下是一个简单的配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/',
},
module:{
rules:[
{
test: /\.css$/i,
use:['style-loader','css-loader']
},
{
test: /\.less$/i,
use:['style-loader','css-loader', 'less-loader']
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8196,
name: 'img/[name][hash:8].[ext]'
},
}
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/i,
use: ['vue-loader'],
}
],
},
resolve:{
extensions: ['.js', '.css', '.vue'],
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
}
四.webpack、node、npm关系
node.js 是一个运行在服务端的javascript运行环境，是javascript运行的载体
webpack是前端代码打包工具，可以对模块化js，css，图片等进行打包，模块依赖进行解析
npm是node package manager，即node.js包管理器
npm init：是包管理初始化，会进行包名，版本，入口等参数进行设置，执行该命令后会生成一个package.json文件，其中scripts就是npm run执行的命令，用来简化webpack运行命令
五.css文件打包
webpack中loader
webpack处理less文件
less-loader如果项目中我们想用less，scss，stylus来书写样式，webpack是可以处理的，只不过要安装对应的loader，以less文件为例
css-loader只负责将css文件进行加载
style-loader负责将样式文件添加到DOM中
图片文件处理
url-loader 其中图片文件大小小于limit中指定的图片大小阈值，将图片编译成base64显示
file-loader 图片大小大于阈值，直接加载指定路径下的图片
五.ES6语法转es5
webpack中es6语法转es5可以通过babel工具进行转化
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
安装完这些依赖的loader后再次打包即可将es6语法转成es5
六.Webpack中使用Vue配置
webpack中集成Vue.js
npm install vue --save，这时候就会将vue安装到node_modules下，然后我们就可以通过import Vue from ‘vue’导入Vue对象
组件化开发loader依赖
vue-loader vue文件加载依赖
vue-template-compiler vue文件代码编译依赖
npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
七.组件化开发.vue文件基本格式
<template>
<div>
<h2 class="title">{{msg}}</h2>
<button @click="btnclick">按钮</button>
<Cpn></Cpn>
</div>
</template>
<script>
import Cpn from './Cpn'
export default {
name: 'App',
components: {
'Cpn': Cpn
},
data(){
return {
msg: 'i love you'
}
},
methods:{
btnclick(){
alert("hello")
}
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
