输入指令:
npm init
一路按回车即可,后续可在package.json里面修改
输入指令:
npm install webpack webpack-cli -g 全局安装
npm install webpack webpack-cli -D 局部安装
推荐【npm install webpack webpack-cli -D】命令(安装到本项目),当然也可以安装到全局( npm i -g webpack ),多个项目公用一个Webpack。
引入非js文件需要安装Loader
npm i -D style-loader css-loader less-loader
使用Loader加载的css是打包到js里面的,然后动态的向head插入style标签的方式。
通过extract-text-webpack-plugin 插件把注入到js的文件单独提取到一个css文件。
npm i -D extract-text-webpack-plugin
通过html-webpack-plugin 插件复制’./src/’ 文件,并自动引入打包输出的所有资源(JS/CSS)。
npm install --save-dev html-webpack-plugin
注意: 使用html-webpack-plugin后,源文件不要再引入打包后的资源文件了,要不然编辑报错 ,具体分析见:https://blog.csdn.net/daodaoke/article/details/107370795
npm i -D webpack-dev-server
/** 默认关闭,可用下面配置在启动的时候开启监听 **/
webpack-dev-server --watch
/** 模块热替换默认关闭,可用下面配置在启动的时候开启监听 **/
webpack-dev-server --hot
/** Source Map默认关闭,可用下面配置在启动的时候开启监听 **/
webpack-dev-server --devtool source-map
webpack必须指定一些配置才能完成打包
const { resolve } = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/js/index.js',
output:{
filename:'js/bundle.js',
path: resolve(__dirname, 'dist'),
},
//设置开发者工具的端口号,不设置则默认为8080端口
devServer: {
contentBase:resolve(__dirname, 'dist'),
inline: true,
port: 8888,
compress:true,
hot:true,
open:true
},
module: {
rules: [
{
// 处理 less 资源
test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader'],
},{
// 处理 css 资源
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},{
// 处理 图片 资源
test: /\.(jpg|png)$/,
loader: 'url-loader',
options:{
limit: 8 * 1024,
name:'[hash:10].[ext]',
esModule:false,
outputPath:'images'
}
},{
// 处理html里面的 图片 文件
test: /\.html$/,
loader: 'html-loader',
},{
// 处理其他资源,排除上面的
exclude: /\.(html|js|css|less|jpg|png)$/,
loader: 'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'font'
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/' //指定模板
})
],
mode:'development' //开发者模式
}
webpack只是打包,当我们需要打包且输出实体文件的时候,可以直接执行
webpack --mode development
一般情况,调试的时候,可以直接用webpack-dev-server启动即可,打包在内存中,不会输出实体文件
webpack-dev-server
本文地址:https://blog.csdn.net/daodaoke/article/details/107280586
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论