Node.js webpack

npm i webpack -g

在编辑js的时候使用node,然后使用webpack打包成bundle.js在导入到html中.
这样做的好处是

  1. 处理js文件的相互依赖关系
  2. 处理js兼容问题,把node.js的语法翻译成浏览器能解析的代码
    webpack main.js bundle.js

webpack.config.js来配置webpack

const path = require('path')
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output: {
		path.join(__dirname, './dist',
		filename: 'bundle.js'
	}
}

webpack-dev-server依赖于webpack,必须安装在本项目中
npm i webpack
npm i webpack-dev-server

webpack-dev-server打包的bundle.js并没有放在物理磁盘里,而是放在了内存里,所以根目录找不到bundle.js.在根目录里/bundle.js

配置webpack-dev-server
  1. 安装npm i webpack
  2. 安装npm i webpack-dev-server
  3. 安装npm i html-webpack-plugin 不用手动导入js
  4. 配置
    webpack.config.js来配置webpack
const path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: path.join(__dirname, './src/main.js'),
	output: {
        path: path.join(__dirname, './dist'),
		filename: 'bundle.js'
	},
	plugins:[ // 添加plugins节点配置插件
		new htmlWebpackPlugin({
			template:path.resolve(__dirname, 'src/index.html'),//模板路径
			filename:'index.html'//自动生成的HTML文件的名称
		})
	]
}
  1. 配置scrpits中快捷dev
{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack": "^4.34.0",
    "webpack-dev-server": "^3.7.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.3.4"
  }
}
参数描述
open自动打开浏览器
port监听端口
contentBase src自动打开src文件夹中的index,默认是根目录,不是src
hot异步,不用手动刷新
  1. 运行 npm run dev
处理css

1.安装npm i style-loader css-loader
2.配置第三方文件的匹配规则,新建module节点

module: { // 用来配置第三方loader模块的
      rules: [ // 文件的匹配规则
          { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
      ]
  }
使用webpack处理css中的路径
  1. 运行cnpm i url-loader file-loader
  2. webpack.config.js中添加处理url路径的loader模块:
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  1. 可以通过limit指定进行base64编码的图片大小;只有小于指定字节(byte)的图片才会进行base64编码:
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
处理字体文件

安装npm i bootstrap

import `bootstrap/dist/css/bootstrap.css`

{test: /\.(ttf|eot|svg|woff|woff2)$/,use: 'url-loader'}
babel

如果用了es6的新语法则需要用babel进行语法降级打包

  1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime
  2. 运行cnpm i babel-preset-env babel-preset-stage-0
  3. webpack.config.js中添加相关loader模块,排除node_modules,不要编译别人写好的包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  1. 在项目根目录中添加.babelrc文件,并修改这个配置文件如下:
{
    "presets":["env", "stage-0"],
    "plugins":["transform-runtime"]
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值