其中浏览器不认识require关键字，webpack main.js build.js[运行时使用]
webpack是一个资源的打包工具可以将 .js, .css , image等静态资源当做一个模块来进行打包，那么每一种模块都是有一个对应的 loader来实现, webpack是基于nodejs运行的，所以在安装webpack之前必须先安装nodejs环境,
开发代码【src】和打包后生成的代码【dist】
webpack 入口文件.js 输出文件.js
webpack // 最基本的启动webpack的方法，默认查找名称为 webpack.config.js文件
webpack --config webpack.config.js // 指定配置文件
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码
webpack.config.js【在src中】配置文件的作用
如果只在cmd命令面板中输入 webpack指令，后面不跟任何参数的话，则默认查找的是 webpack.config.js文件，在这个文件中可以配置入口文件，输出文件以及相关loader和插件等,以增强webpack的功能
- 【其中webpack1.4.0要求输出的路径为绝对路径，方法为：path:_dirname(所在文件夹的绝对路径）+'/dist'】
一个常用webpack1.0版本的webpack.config.js文件结构：
// 导入html-webpack-plugin 包，用来根据模板自动生成index.html
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', // 1.0 定义打包的入口文件路径
output:{
path:'./dist', //打包以后的文件存放目录
filename:'build.js' // 打包以后生成的文件名称
},
module:{
loaders:[
{
// 将当前项目中所有的.js文件都要进行es6转es5操作，node_moudels除外
test:/\.js$/, //表示当前要打包的文件的后缀正则表达式
// loader:'babel-loader?presets[]=es2015', //如果写到这里，将来在打包.vue文件的时候会报错，表示先利用css-loader解析.css文件，再调用style-loader打包
loader:'babel-loader',
exclude:/node_modules/ //node_modules中的所有.js文件不去转换，提高打包性能
}
]
},
babel:{
presets: ['es2015'], //表示es6转es5
plugins: ['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
},
plugins:[
new htmlwp({
title: '首页', //生成的页面标题
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'index1.html' //根据index1.html这个模板来生成(这个文件请你自己生成)
})
]
}
loader介绍
webpack本身不支持css,less,sass,js,image等相关资源的打包工作的，它仅仅提供了一个基础的框架，在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作
4.0.3 webpack相关配置
在使用loader之前需要在当前项目目录下打开cmd命令面板，输入: npm init 初始化一个 package.json文件来存放相关的 loader包
4.0.3.1 打包css资源演示
【--save -dev 是为了将包的版本号和文件名保存到package.json】
webpack中使用css-loader和style-loader这两个loader来处理css资源的打包工作，所以使用前必须在项目中先安装这两个包: npm i css-loader style-loader --save-dev
在webpack.config.js中配置这两个loader
在项目中建立一个site.css文件，并且在main.js中导入
在cmd中执行webpack命令
4.0.3.2 打包sass资源演示
webpack中使用sass-loader，css-loader，style-loader来处理.scss文件的打包工作,而sass-loader需要依赖于node-sass所以使用前必须在项目中先安装这些包， 并且node-sass的某些文件下载是需要去google上的，为了防止被墙而导致安装失败，所以建议使用cnpm来安装： cnpm install node-sass sass-loader css-loader style-loader --save-dev
在webpack.config.js中配置这两个loader
在项目中建立一个site1.scss文件，并且在main.js中导入
在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 此时检查build.js文件的内容，sass语法是变成了css语法表示打包成功
4.0.3.3 打包less资源演示
需要安装的node包有：
css-loader： 编译css
style-loader：编译css
less-loader： 编译less
less: less-loader的依赖包
在项目根目录下打开cmd命令面板，输入：
npm install less less-loader style-loader css-loader --save-dev 回车即可完成安装
在webpack.config.js中配置这两个loader
在项目中建立一个site1.scss文件，并且在main.js中导入
在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 此时检查build.js文件的内容，less语法是变成了css语法表示打包成功
4.0.3.4 打包url()请求的资源
需要安装的node包有：
url-loader：打包通过url()方式的请求资源
file-loader: url-loader的依赖loader
在项目根目录下打开cmd命令面板，输入：
npm install url-loader file-loader --save-dev 回车即可完成安装
在webpack.config.js中配置这两个loader
在site.css文件导入一个图片
在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 检查是否成功分两种情况： 1、如果打包的图片大小大于配置文件中 url-loader?limit= 中的limit值的话，则会在目录下看到一张单独的一个图片 2、如果打包的图片大小小于等于配置文件中 url-loader?limit= 中的limit值的话，则会将图片以base64格式存储在build.js中 请按照上述两种情况去验证是否打包成功
4.0.3.5 ECMAScript6语法转ECMAScript5语法
需要安装的node包有：
babel-core
babel-loader
babel-preset-es2015
babel-plugin-transform-runtime：这个包主要是在打包.vue组件页面中的es6语法需要
在项目根目录下打开cmd命令面板，输入：
npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev 回车即可完成安装
在webpack.config.js中配置这两个loader
在main.js中使用es6语法导入site.css
import '../statics/css/site.css'
在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成
检查build.js文件中，如果出现了类似于 require('../statics/css/site.css'); 但是看不到import '../statics/css/site.css' 表示转换成功,
需要安装的node包有：
babel-core
babel-loader
babel-preset-es2015
babel-plugin-transform-runtime：这个包主要是在打包.vue组件页面中的es6语法需要
在项目根目录下打开cmd命令面板，输入：
npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev 回车即可完成安装
- 在webpack.config.js中配置这两个loader
- 在main.js中使用es6语法导入site.css
import '../statics/css/site.css'
- 在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成
检查build.js文件中，如果出现了类似于 require('../statics/css/site.css'); 但是看不到import '../statics/css/site.css' 表示转换成功
- loader介绍
webpack本身不支持css,less,sass,js,image等相关资源的打包工作的，它仅仅提供了一个基础的框架，在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作
4.0.3 webpack相关配置
在使用loader之前需要在当前项目目录下打开cmd命令面板，输入: npm init 初始化一个 package.json文件来存放相关的 loader包
4.0.3.1 打包css资源演示
webpack中使用css-loader和style-loader这两个loader来处理css资源的打包工作，所以使用前必须在项目中先安装这两个包: npm i css-loader style-loader --save-dev
- 在webpack.config.js中配置这两个loader
- 在项目中建立一个site.css文件，并且在main.js中导入
- 在cmd中执行webpack命令
4.0.3.2 打包sass资源演示
webpack中使用sass-loader，css-loader，style-loader来处理.scss文件的打包工作,而sass-loader需要依赖于node-sass所以使用前必须在项目中先安装这些包， 并且node-sass的某些文件下载是需要去google上的，为了防止被墙而导致安装失败，所以建议使用cnpm来安装： cnpm install node-sass sass-loader css-loader style-loader --save-dev
- 在webpack.config.js中配置这两个loader
- 在项目中建立一个site1.scss文件，并且在main.js中导入
- 在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 此时检查build.js文件的内容，sass语法是变成了css语法表示打包成功
4.0.3.3 打包less资源演示
需要安装的node包有：
css-loader： 编译css
style-loader：编译css
less-loader： 编译less
less: less-loader的依赖包
在项目根目录下打开cmd命令面板，输入：
npm install less less-loader style-loader css-loader --save-dev 回车即可完成安装
- 在webpack.config.js中配置这两个loader
- 在项目中建立一个site1.scss文件，并且在main.js中导入
- 在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 此时检查build.js文件的内容，less语法是变成了css语法表示打包成功
4.0.3.4 打包url()请求的资源
需要安装的node包有：
url-loader：打包通过url()方式的请求资源
file-loader: url-loader的依赖loader
在项目根目录下打开cmd命令面板，输入：
npm install url-loader file-loader --save-dev 回车即可完成安装
- 在webpack.config.js中配置这两个loader
- 在site.css文件导入一个图片
- 在cmd中执行webpack命令
在项目根目录下打开cmd命令面板，输入：webpack 回车即可打包完成 检查是否成功分两种情况： 1、如果打包的图片大小大于配置文件中 url-loader?limit= 中的limit值的话，则会在目录下看到一张单独的一个图片 2、如果打包的图片大小小于等于配置文件中 url-loader?limit= 中的limit值的话，则会将图片以base64格式存储在build.js中 请按照上述两种情况去验证是否打包成功
我们在修改了代码以后需要不断的重新执行webpack命令重新打包然后回到浏览器刷新页面去查看，这种开发效率很低下，
所以这里使用webpack-dev-server当代码更新的时候自动重新打包和刷新浏览器。
需要安装的node包有：
webpack-dev-server ： webpack开发服务器
html-webpack-plugin ：结合webpack在内存中自动生成index.html的入口文件
在项目根目录下打开cmd命令面板，输入：
npm install webpack-dev-server html-webpack-plugin --save-dev 回车即可完成安装
在package.json文件中配置webpack-dev-server命令
"scripts": {
"dev":"webpack-dev-server --inline --hot --open --port 4009"
}
【【【【webpack run dev ]]]会自动的找到script然后执行Dev指令而且还会自动的向内存中【index1.HTML注入script、、、指向webpack。config。js中输的文件路径build。js】】】】
参数说明：
--inline :自动刷新
--hot :热加载
--port 指定监听端口为 5200
-- open : 自动在默认浏览器中打开
-- host： 可以指定服务器的ip，不指定默认为127.0.0.1(localhost)
配置html-webpack-plugin组件
webpack-dev-server要实现浏览器自动刷新，必须要利用html-webpack-plugin在内存中生成index.html页面才能实现
html-webpack-plugin 配置步骤：
1、在webpack.config.js中加入如下代码：
// 导入html-webpack-plugin 包,获取到插件对象
var htmlwp = require('html-webpack-plugin');
plugins:[
new htmlwp({
title: '首页', //生成的页面标题
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'index1.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
})
]
index1.html 模板页面代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="app">
</div>
</body>
</html>
运行
在cmd中执行npm run dev 命令开启 webpack-dev-server服务器来运行vue项目
这时候可以随便修改一个css样式，就会自动刷新看到效果
1.0.2 利用webpack解析和打包 .vue组件页面
Vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于 webpack的vue-loader才能使用
所以必须安装相关包：
vue-loader ： .vue文件编译loader
vue-template-compiler ： .vue模板编译,被vue-loader所依赖
babel-plugin-transform-runtime : es6实时转换成es5语法
1、在项目根目录下打开cmd命令面板，输入：
npm install vue-loader vue-template-compiler babel-plugin-transform-runtime --save-dev 回车即可完成安装
[[[[[[[保存在package.json中的devdependence里面在开发阶段使用，在运行阶段不适用]]]]]]]
2、在webpack.config.js中添加如下配置（只能在webpack1.0中使用）：
babel:{
presets: ['es2015'],
plugins: ['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
在webpack2.0中在webpack.config.js中添加 babel:{}是不认识的，要改成如下方式：
在项目根目录下新建 .babelrc文件，内容填写如下：
{
presets: ['es2015'],
plugins: ['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
3、在webpack.config.js中的loaders中增加
{
// 打包.vue文件
test:/\.vue$/, //表示当前要打包的文件的后缀正则表达式
loader:'vue-loader' //
}
扫一扫
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
