分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

webpack

发布时间:2023-09-06 02:01责任编辑:彭小芳关键词:webpack

webpack默认只能处理.js文件,如果想处理别的文件需要loader

css-loader

处理.css文件

style-loader

处理样式

entry.js:

require(‘style!css!./style.css‘)

webpack.config.js:

module.exports = {

  entry:‘./entry.js‘,

  output:{

     path:__dirname,

     filename:‘bundle.js‘

  },

  module:{

     loaders:[

        { test:/\.css$/,loader: ‘style!css‘ }

     ]

   }

}

这时再requirecss时候就不用加!这部分了

webpack配合babel使用:

需要安装babel-loader

然后安装babel核心:babel-core

安装预设: babel-preset-es2015 

都是 --save-dev

建立.babelrc

{

"presets":[‘es2015‘]

}

配置webpack.config.js:

介绍一下webpack-dev-server:

来个全的:

npm install

babel-core(babel核心)

babel-preset-env(就是过去的babel-preset-es2015,只是换了个名字)

babel-preset-react( react 的jsx转换插件)

webpack(webpack)

webpack-dev-server(webpack开发服务器)

babel-loader(webpack的loader ,允许webpack使用babel)

react-hot-loader(react热更新?)

--save-dev

npm install react react-dom

webpack

原文地址:https://www.cnblogs.com/eret9616/p/9221175.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved