Open JackWong992 opened 6 years ago
因为三大框架:react,vue,nodeJs都需要,所以需要;同时,webpack也是你从小白到工程师的跳跃。
webpack顾名思义,叫做模块打包机
1.建立两个文件夹:src 和 dist,src主要是平时写代码,工作环境 dist主要是提交给组长的地方,生产环境
<div id="title"></div> <script src="./bundle.js"></script>
src文件夹下,写一个entery.js文件,具体代码如下:
document.getElementById('title').innerHTML="hello world!";
在终端输入:webpack src/entery.js dist/bundle.js 打开本地服务器:http-server -c-1 打开 > index.html文件:hello world 这里的bundle.js是一个生成文件,上述就是一个简单的webpack模拟的打包过程。
webpack.config.js
const path=require('path'); //表示一个常量,不可以更改的。 module.exports={ entry:{ entry:'./src/entry.js' //出口文件,表示一个相对的路径 }, output:{ path:path.resolve(_dirname,'dist'), //node的语法,下面的路径表示一个绝对的路径 filename:'bundle.js' }, module:{}, plugins:[], devServer:{} }
entryTwo:'./src/xxx.js'
filename:'[name].js'
index.html
devServer{ //设置目录的基本结构 contentBase: path.resolve(__dirname , ' dist ') , //服务器的IP地址,可以使用IP也可以使用Localhost,IP的查询方法:终端->ipconfig->IPV4 host:'localhost', //服务端压缩是否开启 compress: true, //配置服务器端口号:可以随便设置 port:10086 }
然后开始在终端安装webpack-server服务:npm install webpack-dev-server --save-dev 完成以后执行终端输入webpack-dev-server并不成功的,我们需要修改package.json配置文件: "script:{ "server": "webpack-dev-server" }" 这个时候热更新已经完成了。 在终端输入:npm run server在地址栏输入“localhost:xxx(port)” 我们随意修改entry的文件就会发现页面是自动刷新的。
npm install webpack-dev-server --save-dev
webpack-dev-server
"script:{ "server": "webpack-dev-server" }"
npm run server
Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。 在src目录下新建一个文件夹:css>index.css
body{ background-color: red; color: white; }
在src下的入口文件entry.js输入(这里写相对路径):import css from './css/index.css' 这时候我们的猪脚style-loader和css-loader就要登场了: 终端安装: npm install style-loader --save-dev ->style-loader npm install css-loader --save-dev ->css-loader style-loader:主要是用来处理css中的url等 css-loader:主要是用来处理css中的style标签等 下载完成以后,配置webpack.config.js中的module属性:
import css from './css/index.css'
style-loader
css-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
module:{ rules: [{ test: / \.css$ /, use:['style-loader' , 'css-loader'] }] }
JS的打包需要引入一个插件:uglify()插件 引入方式命名一个常量:const uglify=require(uglifyjs-webpack-plugin) 在webpack-config.js中的plugin中引入:plugins:[ new uglify( ) ] 这样一个JS文件就压缩完成了
const uglify=require(uglifyjs-webpack-plugin)
plugins:[ new uglify( ) ]
首先删除dist文件夹下的代码信息,这是用于生产环境。 在webpack-config.js文件下,引入html-webpack-plugin插件:const htmlPlugins= require('html-webpack-plugin'); 然后引入npm安装包:npm install --save-dev html-webpack-plugin 最后在webpack.config.js 里的plugin里进行插件配置:
webpack-config.js
html-webpack-plugin
const htmlPlugins= require('html-webpack-plugin');
new htmlPlugin({ minify: { removeAttributeQuotes: true }, hash: true, template: './src/index.html' })
总结:html文件的打包可以有效的区分开发目录和生产目录,在webpack的配置中也要搞清楚哪些配置用于生产环境,哪些配置用于开发环境,避免两种环境的配置冲突。
前端为什么需要webpack?
因为三大框架:react,vue,nodeJs都需要,所以需要;同时,webpack也是你从小白到工程师的跳跃。
什么是webpack?
webpack顾名思义,叫做模块打包机
安装webpack
package.json > "webpack: "xxx" 修改为最新版本 2. 删除node_modules 3. npm install (webpack更新,依赖包更新)
开始一个简单的demo吧
1.建立两个文件夹:src 和 dist,src主要是平时写代码,工作环境 dist主要是提交给组长的地方,生产环境
src文件夹下,写一个entery.js文件,具体代码如下:
在终端输入:webpack src/entery.js dist/bundle.js 打开本地服务器:http-server -c-1 打开 > index.html文件:hello world 这里的bundle.js是一个生成文件,上述就是一个简单的webpack模拟的打包过程。
第二章:插件与配置
入口和出口
webpack.config.js
: 具体代码如下:entryTwo:'./src/xxx.js'
在出口处修改为:filename:'[name].js'
修改完成后在index.html
引入文件地方修改即可,在终端输入webpack跑起来进行测试。服务和热更新
然后开始在终端安装webpack-server服务:
npm install webpack-dev-server --save-dev
完成以后执行终端输入webpack-dev-server
并不成功的,我们需要修改package.json配置文件:"script:{ "server": "webpack-dev-server" }"
这个时候热更新已经完成了。 在终端输入:npm run server
在地址栏输入“localhost:xxx(port)” 我们随意修改entry的文件就会发现页面是自动刷新的。打包CSS文件
Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。 在src目录下新建一个文件夹:css>index.css
在src下的入口文件entry.js输入(这里写相对路径):
import css from './css/index.css'
这时候我们的猪脚style-loader
和css-loader
就要登场了: 终端安装:npm install style-loader --save-dev
->style-loadernpm install css-loader --save-dev
->css-loader style-loader:主要是用来处理css中的url等 css-loader:主要是用来处理css中的style标签等 下载完成以后,配置webpack.config.js中的module属性:打包JS
JS的打包需要引入一个插件:uglify()插件 引入方式命名一个常量:
const uglify=require(uglifyjs-webpack-plugin)
在webpack-config.js中的plugin中引入:plugins:[ new uglify( ) ]
这样一个JS文件就压缩完成了打包压缩HTML文件
首先删除dist文件夹下的代码信息,这是用于生产环境。 在
webpack-config.js
文件下,引入html-webpack-plugin
插件:const htmlPlugins= require('html-webpack-plugin');
然后引入npm安装包:npm install --save-dev html-webpack-plugin 最后在webpack.config.js 里的plugin里进行插件配置: