本文中将描述
近几年前端的快速发展,前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术。例如
项目不可避免的膨胀,越来越复杂,自然而然的我们就会寻求各种优化,压缩代码的方案,前端工程化让我们非常头疼,在这个寻找前端模块化解决方案过程中我们了解到了webpack。
实质上,webpack可以理解成是一种前端模块化自动打包的解决方案。更重要的是它可以通过配置就可以运用前端的各种技术。
vue 打包命令、WebPack也可以可以看做是模块打包机,它可以分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
npm init
安装 vue 以及vue-loader ,安装成功后,会在package.json中多一项配置
npm i webpack vue vue-loader
#--save-dev 会作为开发依赖来安装 安装成功后,会在package.json中多一项配置
npm install webpack --save-dev
安装 cssloader
npm i css-loader vue-template-compiler
webpack打包jquery项目。安装 webpack-dev-server ,它可以在开发环境中提供很多服务
npm install webpack-dev-server --save-dev
安装 cli
npm i -D webpack-cli
webpack 是用来编译打包项目的,那么在这里,我们需要对它进行一些目录的指定,也就是说需要告诉它要打包哪些内容,并且输出到哪。
在 package.json文件中添加
"dev": "webpack-dev-server --open --config webpack.config.js"
webpack vue。config 指向了 webpack.config.js 文件,在项目目录下创建 webpack.config.js 文件,在这里面配置 webpack 打包的基本信息
var path = require('path');var config={// webpack 编译的入口文件entry:{// 配置的单入口main:'./main'},//webpack 编译的出口文件// 这里配置的打包后的文件会存储为 vue-wb/dist/main.jsoutput:{// 存放打包后的文件输出目录path:path.join(__dirname,'./dist'),// 资源文件引用的目录publicPath:'/dist/',// 输出文件的名称filename:'main.js'}
};module.exports = config;
在项目目录下创建 main.js 文件,当然目前 main.js 文件中无内容,这个main.js 文件则是上述配置中 webpack 编译的的入口文件。
项目我们在项目目录下创建 index.html , 在这里引用了 “./dist/main.js” 正是上面配置 webpack 打包输出的js文件
<!DOCTYPE html>
<html><meta charset="utf-8"><title>webpack</title><body><div id="app">Hollo world </div><script type="text/javascript" src="/dist/main.js"></script></body>
</html>
然后在项目目录下打开终端 执行
npm run dev
编译成功,打开页面
然后我们在 main.js 文件中加入
document.getElementById('app').innerHTML="hello 小疯子"
webpack打包原理vue。然后保存,浏览器中自动更新
在 webpack 的世界中,每个文件都是一个模块,比如 .css .js .html .jpg 等,对于不同的模块,需要使用不同的加载器来处理,比如现在要写一些 css 样式,就需要配置 css-loader 和 style-loader
npm install css-loader --save-dev
npm install style-loader --save-dev
安装完成后,在 webpack.config.js 文件中配置 loader ,增加对 .css 文件的处理
var path = require('path');var config = {// webpack 编译的入口文件entry: {// 配置的单入口main: './main'},//webpack 编译的出口文件// 这里配置的打包后的文件会存储为 vue-wb/dist/main.jsoutput: {// 存放打包后的文件输出目录path: path.join(__dirname, './dist'),// 资源文件引用的目录publicPath: '/dist/',// 输出文件的名称filename: 'main.js'},// module 对象中的 rules 属性中可以指定一系列的loaders,每一个 loader 都// 包含一个 test 和 use 选项// 当 webpack 编译过程中遇到 require() 或者 import 语句导入一个后缀名为 .css // 文件时,先将它通过 css-loader 转换,再通过 style-loader 转换,然后继续打包module: {rules: [{test: /\.css$/,use: ['style-loader','css-loader']}]}
};module.exports = config;
然后在项目目录下创建 style.css文件
#app{font-size: 20;color: blueviolet;
}
然后在 main.js 文件中引入
import './style.css'
document.getElementById('app').innerHTML="hello 小疯子"
vue编译打包。然后
npm run dev
安装 extract-text-webpack-plugin 插件把散落在项目中的所有 css 文件打包并生成一个 css 文件
npm install extract-text-webpack-plugin --save-dev
或者 webpack 4.0.0 以上使用
npm install --save-dev extract-text-webpack-plugin@next
然后在配制文件中导入插件
// 导入插件
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态