搭建租号网的网站,网站项目流程,中国营销网站大全,济南网站建设公司排名目标#xff1a;建一个自动化工作流环境 自动编译 自动合并 自动刷新 自动部署 工作流#xff1a;
1 全局安装webpack
执行命令#xff1a; npm install webpack webpack-cli -g 其中webpack-cil 是命令接口工具 2 初始化当前项目#xff1a;npm init
然后一路回车…目标建一个自动化工作流环境 自动编译 自动合并 自动刷新 自动部署 工作流
1 全局安装webpack
执行命令 npm install webpack webpack-cli -g 其中webpack-cil 是命令接口工具 2 初始化当前项目npm init
然后一路回车即可 3 为了避免冲突我们再进行局部安装npm install webpack webpack-cli --save -d
说明安装到了开发环境下的工具 打开项目文件夹发现多了两个文件 也多了一个文件夹 当传文件时可以将该文件夹删除在新的项目中执行npm install 他将会帮忙将所有依赖全部下载下来 4 执行 webpack
报错如下
Insufficient number of arguments or no entry found.Alternatively, run webpack(-cli) --help for usage info.
这是因为需要一个入口文件默认是从src 下的index.js文件为 入口文件 这时需要新建一个src 文件夹下然后新建一个index.js 的入口文件
重新执行没有再报错 这时候需要额外了解 webpack的4个核心概念
入口 entry
出口 output
loader 解析器
插件 plugins
5 规定webpack处理打包方式——
有两种方式1shell 语句的方式 例如手动命令行写入 webpack --modedevelopment 配置文件为开发环境 2 配置文件的方式 新建一个webpack.config.js 的文件然后将配置要求写入该文件中以本次项目为例webpack.config.js 文件内容如下 var UglifyJSPlugin require(uglifyjs-webpack-plugin);
module.exports {
entry: {
index: ./src/js/meituan.js,
goodsInfo: ./src/js/goodsInfo.js
},
output: {
filename: [name].js,
path: __dirname /out,
// publicPath: http://localhost:8080/out,
},
module: {
rules: [
{test: /.js$/, use: [babel-loader]},
{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: [url-loader?limit1000name./[name].[ext]]},
{test: /.css$/, use: [style-loader, css-loader]}
]
},
plugins: [
new UglifyJSPlugin(),
],
mode: development 入口文件中需要配置依赖
require(../css/reset.css);require(../plug/css/swiper.min.css);require(../webfont/iconfont.css);require(../css/meituanIndex.css); 然后我们发现每次修改完文件后都需要重新执行下打包 ;
webpack 6 这样很不方便因此我们可以开启一个监听 webpack --watch
这样每次修改完文件后不需要重新打包~有木有很方便
7 更神奇的是webpack还可以帮我们开启一个服务器webpack-dev-server 需要执行如下命令先安装下webpack-dev-server
npm install webpack-dev-server -D
然后执行webpack-dev-server 会自动开启一个端口
8 应用loader module: {
rules: [
{test: /.js$/, use: [babel-loader]},
{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: [url-loader?limit1000name./[name].[ext]]},
{test: /.css$/, use: [style-loader, css-loader]}
]
}, 需要用到三个解析器
npm install file-loader html-loader extract-loader -D
html-loader
{ test/ \.html$/, use:[ //单独抽离的html 文件进行配置 { loader: file-loader, options:{ name:index.html } } //单独抽离 { loader‘extract-loader’ } //找到html 文件 { loader: html-loader } ]
} 8 安装插件 压缩js
npm install uglifyjs-webpack-plugin -D
然后在webpack-config.js 下添加引用 压缩CSS 的插件 首先安装 npm install mini-css-extract-plugin -D 简单工作流程
初始化 ——编译——输出—如果文件发生变化—重新编译——输出 下一期随笔写 熟练使用less/sass 更多专业前端知识请上
【猿2048】www.mk2048.com
