webpack常用配置
1.加载CSS
命令行输入
npm install --save-dev style-loader css-loader
webpack.config.js配置如下
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }};
文件结构如下
webpack-demo|- package.json|- webpack.config.js|- /dist|- bundle.js|- index.html|- /src
+ |- style.css|- index.js|- /node_modules
style.css
.hello {color: red;
}
src/index.js
import _ from 'lodash';
+ import './style.css';function component() {var element = document.createElement('div');// Lodash, now imported by this scriptelement.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.classList.add('hello');return element;}document.body.appendChild(component());
命令行 npm run build
2.加载图片
npm install --save-dev file-loader
这里的文件结构将要发生变化,以下内容将于实际的开发调试相关
webpack-demo|- package.json|- webpack.config.js|- /dist|- /src|- index.js
+ |- print.js|- /node_modules
3.HtmlWebpackPlugin 自动生成index.html
命令行
npm install --save-dev html-webpack-plugin
src/print.js
export default function printMe() {console.log('I get called from print.js!');
}
src/index.js
import _ from 'lodash';
+ import printMe from './print.js';function component() {var element = document.createElement('div');
+ var btn = document.createElement('button');element.innerHTML = _.join(['Hello', 'webpack'], ' ');+ btn.innerHTML = 'Click me and check the console!';
+ btn.onclick = printMe;
+
+ element.appendChild(btn);return element;}document.body.appendChild(component());
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {
- index: './src/index.js',
+ app: './src/index.js',
+ print: './src/print.js'},output: {
- filename: 'bundle.js',
+ filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],};
先删除dist/index.html,然后命令行 npm run build, 观察现象
4.Source maps
用于调试时,控制台精准定定位错误位置。这里只介绍一个简单的 'inline-source-map'。
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},
+ devtool: 'inline-source-map',plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
5.webpack-dev-server 热更新
首先命令行
npm install --save-dev webpack-dev-server
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map',
+ devServer: {
+ contentBase: './dist'
+ },plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};
package.json
{"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1",
+ "start": "webpack-dev-server --open","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","xml-loader": "^1.2.1"}}
最后 npm start 启动热加载,更改文件浏览器会自动刷新。
关于热加载的配置还可以使用 watch mode 和webpack-dev-middleware。 其中watch mode就是在package.json文件的"scripts"属性下添加
.......
"scripts": {"watch": "webpack --progress --watch",},
.......
转载于:https://www.cnblogs.com/renzhiwei2017/p/7676926.html
webpack常用配置相关推荐
- react之webpack常用配置
create-creact-app项目,如果需要手动修改配置,需先npm run eject弹出配置,这个过程是不可逆的. 如何在不通过npm run eject进行webpack配置了? 1.用cr ...
- Webpack 常用命令总结以及常用打包压缩方法
前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约带 ...
- python如何导入numpy简书_Webpack 之常用配置(一)
作者:余韵之 webpack目前是前端常用的工程化工具了.它可以帮助我们自动化构建打包各类的资源,极大的提高了我们打包代码的效率.在webpack看来,所有的资源文件都是模块(module),只是处理 ...
- (超全)Vue.js学习笔记—webpack基础配置(webpack4+babel7+vue2)
webpack基础配置&&单文件组件与vue-loader 参考<Vue,js>实战(梁灏编著) 笔者近期学习Vue.js进阶篇,参考教程流程完成webpack.vue.b ...
- Nginx配置及常用配置
文章目录 一.基本配置及配置说明 1.1 典型配置 1.2 全局变量(nginx内置预定义变量) 二.常用配置 2.1 反向代理配置 2.2 跨域CORS配置 2.2.1 使用反向代理解决跨域 2.2 ...
- Webpack 常用知识点总结
Webpack 常用知识点总结 webpack 是一个模块打包器.webpack 的主要目标是将 javaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transf ...
- 实战 webpack 4 配置解析四
接上篇: 实战 webpack 4 配置解析三 WEBPACK.PROD.JS 解析 现在让我们看看我们的 webpack.prod.js 配置文件,它包含了我们正在处理项目时用于生产构建的所有设置. ...
- 【利用AI让知识体系化】Webpack 相关配置技巧
文章目录 章节一:了解 Webpack Webpack 是什么? 为什么使用 Webpack? Webpack 的基本概念 Webpack 的核心概念和实现原理 章节二:安装和配置 Webpack 安 ...
- Nuxt的目录结构和常用配置
一.目录结构 Nuxt项目的基本目录: 其中: □.nuxt: 在npm run dev启动项目的时候自动生成的临时文件 类似于vue的dist 通常无需多关注 □assets: 静态资源目录 通常用 ...
最新文章
- elasticsearch 条件去重_elasticsearch去重计数
- vc2010中开始执行不调试灰的_消防水炮调试,客户看到调试流程一刹那就满意
- andriod studio 启动service失败_惊呆了!女儿拿着小天才电话手表,问我Android启动流程!...
- 力扣1. 两数之和(哈希表,JavaScript)
- red hat 5.5 vncserver搭建
- 360怎么看电脑配置_怎么样查看电脑配置?5种方法查看电脑硬件配置好坏图文详解...
- 用jq实现移动端滑动轮播以及定时轮播效果
- 【渝粤教育】电大中专微生物与寄生虫基础_1作业 题库
- python_激光点云变换到图像平面
- java 调用net remoting_获取 org.springframework.remoting.RemoteAccessException: 在进行调用时无法访问远程服务?...
- Axure插件axure-chrome-extension安装
- linux查看日志的几种方法
- 金融,财务,融资相关知识(一)
- 用友系统客户端登录不上服务器,客户端不能登录服务器-用友U8
- 《Computer Graphics with OpenGL》计算机图形学读书笔记 02——计算机图形学软件
- L2-032 彩虹瓶
- TI杯 LaunchPad MSP430开发环境搭建
- linux操作系统简介与发展史
- Pycharm DIY背景图片,让你的界面酷起来!
- 谷歌查看html地址_独立站被谷歌收录的方法和技巧分享:三招让Google收录你的独立站...
热门文章
- php yaf 教程,Yaf教程2:入门使用
- java resourcebundle_Java - Properties和ResourceBundle类学习
- 判定2022年是否闰年c语言_C语言接本真题分享19年(2)
- 计算机报名显示事务已被锁死,ORA-01591错误处理: 锁定已被有问题的分配事务处理20.18.156406挂起(转载)...
- python中坐标怎么表示_如何在Python中以像素表示(有限)平面上的坐标
- 软件:常用 Linux 软件汇总,值得收藏!
- 数据库:SQLServer数据库备份方式介绍
- 大型分布式存储方案MinIO介绍,看完你就懂了!
- Web的26项基本概念和技术
- mysql-5.5.8_MySQL5.5.8安装